Tengo una página HTML llamada "viewParagraph.html" en la que hay una tabla con varios elementos. Debajo de esta tabla hay dos botones, uno que me permite editar un párrafo (Actualizar párrafo) y otro que me permite eliminar el párrafo (Eliminar párrafo).
En el primer botón, luego en "Actualizar párrafo" tengo que pasar la misma identificación que paso a "viewParagraph.html". Para la página "viewParagraph.html", la obtengo del código que se muestra a continuación, luego uso window.location.href como se muestra en el código a continuación.
Necesito pasar la misma identificación en el form action="updateParagraph.html ; intento escribir en el formulario action "createParagraph.html? id =" + id_url , como puede ver en el siguiente código, solo que en lugar de pasarme "createParagraph.html? id =" + id_url simplemente me pasa "createParagraph.html" sin el parámetro.
Me gustaría entender si es correcto como lo hice; ¿Puede alguien amablemente ayudarme a hacer esto?
var url_string = window.location.href; var url2 = new URL(url_string); var id_url = url2.searchParams.get("id"); <div class="centered"> <div class="part"> <h3>Paragraphs book</h3> </div> <table id="my-table" width="90%"> <tr> <th>Number</th> <th>Title</th> </tr> </table> <br> <div class="buttons"> <form action="createParagraph.html?id=" +id_url> <input type="submit" value="Update paragraph" /> </form> <input type="button" value="Delete paragraph" /> </div> </div>Una forma común y estándar de pasar dicha información es a través de campos ocultos, si esto es posible en su caso.
Entonces, en lugar de
<form action="createParagraph.html?id=some_id"> <input type="submit" value="Update paragraph" /> </form>Usted tendrá
<form action="createParagraph.html"> <input type="hidden" name="id" value="some_id"> <input type="submit" value="Update paragraph"> </form>Creo que la mejor manera es mantener el código Html y Js separado
HTML:
<form action="createParagraph.html?id=" class="form"> <input type="submit" value="Update paragraph" /> </form>JavaScript:
const form = document.querySelector(".form") form.addEventListener("submit", (e) => { e.preventDefault() form.action = `createParagraph.html?id=${id_url}` })Si quieres que sea dinámico, haz lo siguiente:
var url_string = window.location.href; var url2 = new URL(url_string); var id_url = url2.searchParams.get("id"); function openPage() { location.href = "createParagraph.html?id="+id_url; } <div class="centered"> <div class="part"> <h3>Paragraphs book</h3> </div> <table id="my-table" width="90%"> <tr> <th>Number</th> <th>Title</th> </tr> </table> <br> <div class="buttons"> <form onsubmit="openPage()"> <input type="submit" value="Update paragraph" /> </form> <input type="button" value="Delete paragraph" /> </div> </div>