0
317
VistasCómo pasar dos fechas de entrada de usuario a través de url
Tengo un requisito en el que necesito pasar dos fechas (DateFrom y DateTo) a través de la URL usando <a href> que va a otra página donde muestra el informe de esas fechas. Ambas fechas están en formato aaaa-mm-dd. a continuación se muestra el código que estoy usando. aquí DateFrom y DateTo en la URL serán las fechas que seleccione el usuario.
He usado botones de radio para seleccionar las columnas que se generarán en el informe. el usuario elegirá el primer conjunto de columnas o el segundo conjunto de columnas. y el conjunto de columnas elegido se mostrará en el informe.
Después de elegir entre fecha , fecha y conjunto de columnas , el usuario hará clic en el botón generar informe que va a la otra página donde muestra el informe.
¿Cómo pasaré esos dos valores de fecha y condiciones de botón de opción para seleccionar columnas?
la interfaz de usuario está en FTL (marcador libre). También adjunto una imagen de la interfaz de usuario para una mejor comprensión.
hay dos URL diferentes para dos conjuntos diferentes de columnas. las URL son
- 1er conjunto de columnas: http://localhost:9191/preview?__report=production_1.rptdesign&__format=pdf&DateFrom=2022-06-10&DateTo=2022-06-10
- Segundo conjunto de columnas: http://localhost:9191/preview?__report=production_2.rptdesign&__format=pdf&DateFrom=2022-06-10&DateTo=2022-06-10
si el usuario selecciona el primer conjunto de columnas, se usará un <a href> y si el usuario selecciona el segundo conjunto de columnas, se usará otro <a href> . Todavía no he completado la parte de codificación. ¿Cómo lograré esto en FTL?
<input type="date" id="quality-fromdate"> <input type="date" id="quality-toDate"> <input id="radiobutton1" type="radio" name="radio-button"> <div class="select-columns-options-1" id="select-columns-options1"> <option value="tasks">Product Name</option> <option value="tasks">Order Id</option> <option value="tasks">Quantity Ordered</option> <option value="tasks">Quantity To Produce</option> <option value="tasks">Due Date</option> <option value="tasks">Estimated Completion Time</option> </div> <input id="radiobutton2" type="radio" name="radio-button"> <div class="select-columns-options-2"> <option value="tasks">Product Name</option> <option value="tasks">Quantity Ordered</option> <option value="tasks">Quantity To Produce</option> </div> <a href="http://localhost:9191/preview?__report=production_1.rptdesign&__format=pdf&DateFrom=2022-06-10&DateTo=2022-06-10">Generate Report</a>2 Respuestas
Responde la pregunta0
Tenía bastante por recorrer, aquí está la versión de trabajo que usa eventListener y el objeto URL
No estoy probando las fechas.
También necesitaba ser más consistente con las identificaciones, etc. Supongo que su enlace necesitaba las dos selecciones (eran divs en su código)
const url = new URL("http://localhost:9191/preview?__format=pdf") const linkSpan = document.getElementById("link"); const dateFrom = document.getElementById("quality-fromDate") const dateTo = document.getElementById("quality-toDate") const reportType1 = document.getElementById("select-columns-options1"); const reportType2 = document.getElementById("select-columns-options2"); document.getElementById("reportDiv").addEventListener("click", function(e) { linkSpan.innerHTML = ""; const reportRad = document.querySelector("[name=radio-button]:checked") if (!reportRad) return; if (reportType1.selectedIndex < 1 || reportType2.selectedIndex < 1) return; // nothing selected url.searchParams.set("__report", reportRad.id === "radiobutton1" ? "production_1.rptdesign" : "production_2.rptdesign") url.searchParams.set("__reportType1", reportType1.value); url.searchParams.set("__reportType2", reportType2.value); url.searchParams.set("DateFrom", dateFrom.value) url.searchParams.set("DateTo", dateTo.value) linkSpan.innerHTML = `<a href="${url.toString()}">${reportType1.options[reportType1.selectedIndex].text} - ${reportType2.options[reportType2.selectedIndex].text}</a>`; }) <div id="reportDiv"> <input type="date" id="quality-fromDate"> <input type="date" id="quality-toDate"> <input id="radiobutton1" type="radio" name="radio-button"> <select class="select-columns-options-1" id="select-columns-options1"> <option value="pname">Product Name</option> <option value="oid">Order Id</option> <option value="qo">Quantity Ordered</option> <option value="qp">Quantity To Produce</option> <option value="ddd">Due Date</option> <option value="ect">Estimated Completion Time</option> </select> <input id="radiobutton2" type="radio" name="radio-button"> <select class="select-columns-options-2" id="select-columns-options2"> <option value="pname">Product Name</option> <option value="qo">Quantity Ordered</option> <option value="qtp">Quantity To Produce</option> </select> <span id="link"></span> </div>0
No usaría <a> aquí, ya que la URL debe generarse dinámicamente. Aquí hay un ejemplo usando un botón y averiguando la URL cuando se hace clic en el botón. Si absolutamente tiene que usar <a> , probablemente tendrá que enlazar los eventos de change de las fechas y las radios y actualizar el href de <a> de esa manera.
const btnclick = () => { let radio = document.querySelector("input[type='radio']:checked").id === "radiobutton1" ? 1 : 2; let from = document.querySelector("#quality-fromdate").value; let to = document.querySelector("#quality-toDate").value; console.log(`http://localhost:9191/preview?__report=production_${radio}.rptdesign&__format=pdf&DateFrom=${from}&DateTo=${to}`) } * { margin: 0; padding: 0; box-sizing: border-box; } To: <input type="date" id="quality-fromdate"> From: <input type="date" id="quality-toDate"> <br/> <input id="radiobutton1" type="radio" name="radio-button" checked> <select class="select-columns-options-1" id="select-columns-options1"> <option value="tasks">Product Name</option> <option value="tasks">Order Id</option> <option value="tasks">Quantity Ordered</option> <option value="tasks">Quantity To Produce</option> <option value="tasks">Due Date</option> <option value="tasks">Estimated Completion Time</option> </select> <br/> <input id="radiobutton2" type="radio" name="radio-button"> <select class="select-columns-options-2"> <option value="tasks">Product Name</option> <option value="tasks">Quantity Ordered</option> <option value="tasks">Quantity To Produce</option> </select> <br/> <button onclick="btnclick()">Generate Report</button>