How to pass the id that I pass to the HTML page in the form action present in the same HTML page-CodePudding

I have an HTML page called "viewParagraph.html" in which there is a table with various elements. Below this table there are two buttons, one that allows me to edit a paragraph (Update paragraph) and the other that allows me to delete the paragraph (Delete paragraph).

At the first button, then in "Update paragraph" I have to pass the same id that I pass to "viewParagraph.html". For the "viewParagraph.html" page I get it from the code shown below, then using window.location.href as shown in the code below.

I need to pass the same id in form action="updateParagraph.html; I try to write in the form action "createParagraph.html? id =" id_url, as you can see from the code below, only instead of passing me "createParagraph.html? id =" id_url it just passes me "createParagraph.html" without the parameter.

I would like to understand if it is right as I did; can someone kindly help me do this?

var url_string = window.location.href;
var url2 = new URL(url_string);
var id_url = url2.searchParams.get("id");

<div >
  <div >
    <h3>Paragraphs book</h3>
  </div>
  <table id="my-table" width="90%">
    <tr>
      <th>Number</th>
      <th>Title</th>
    </tr>
  </table>
  <br>
  <div >
    <form action="createParagraph.html?id="  id_url>
      <input type="submit" value="Update paragraph" />
    </form>
    <input type="button" value="Delete paragraph" />
  </div>
</div>

CodePudding user response：

A common & standard way of passing such information is via hidden fields, if this is possible in your case.

So instead of

<form action="createParagraph.html?id=some_id">
  <input type="submit" value="Update paragraph" />
</form>

You will have

<form action="createParagraph.html">
  <input type="hidden" name="id" value="some_id">
  <input type="submit" value="Update paragraph">
</form>

CodePudding user response：

I think best way is keep separate Html and Js code

Html:

 <form action="createParagraph.html?id=" >
      <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}`
})