0

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 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>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
a_l_e_x
  • 408
  • 1
  • 6
  • 20
  • 2
    HTML and JavaScript are separate things. JavaScript can act on HTML only through the DOM, and HTML can only interact with JavaScript through specific attributes. You can't just write JavaScript into HTML like `id=" + id_url` and have it work (at least, not without some kind of pre- or post-processor working on it. Luckily it's quite easy to update the `action` of a `form` element in JavaScript; ``document.querySelector('form').action = `createParagraph.html?id=${id_url}`;`` – Heretic Monkey Feb 16 '22 at 17:31
  • OK thanks. Can you show me the complete code with my example please? – a_l_e_x Feb 16 '22 at 17:33
  • @HereticMonkey I have seen this post, but I have not understood – a_l_e_x Feb 16 '22 at 17:35
  • @HereticMonkey If you do this with my example I will understand better, because I am a beginner – a_l_e_x Feb 16 '22 at 17:36
  • 1
    I could, but I think that you can do that yourself from the comment I've left above, and the answers to the question linked in the second comment. The code in the first comment, placed right after the third line of code in the snippet, will produce the desired effect. Please be less afraid of trying things out yourself; you'll learn much better for it. – Heretic Monkey Feb 16 '22 at 17:37
  • It is not afraid, I would like to understand only if `createParagraph.html?id="+ id_url` should be left or not – a_l_e_x Feb 16 '22 at 17:43
  • you could leave 'createParagraph.html' and then concatenate it to your parameter via javascript: `document.querySelector('form').setAttribute('action', document.querySelector('form').getAttribute('action') + '?id=' + id_url);` – GrafiCode Feb 16 '22 at 17:45
  • @GrafiCode No need for `setAttribute` and `getAttribute`; `action` is a property on `HTMLFormElement`; it can be done using the simple code shown in my first comment. – Heretic Monkey Feb 16 '22 at 17:46
  • Remove it to be less confusing and because it doesn't work, but it doesn't matter; the JavaScript will reset the value of the `action` property anyway. – Heretic Monkey Feb 16 '22 at 17:47
  • @HereticMonkey you're absolutely right – GrafiCode Feb 16 '22 at 17:48
  • @HereticMonkey i tried as you said but i get `createParagraph.html?` – a_l_e_x Feb 16 '22 at 19:10
  • Then there's something wrong with the code around it. At the very least you should be getting `createParagraph.html?id=`. Debug the code and make sure `id_url` has a value. Also make sure you're using the backtick character, not a single quote character. – Heretic Monkey Feb 16 '22 at 19:44
  • after ? `id` i'm not getting it. `id_url` has value, I have debugged and get the value correctly – a_l_e_x Feb 16 '22 at 19:48

3 Answers3

0

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>
Orius
  • 1,093
  • 5
  • 11
  • This doesn't manipulate any DOM element. OP didn't want to pass the ID parameter to a different page, but to pass it to the form's action url. – GrafiCode Feb 16 '22 at 17:39
  • 1
    By the way, I think nowadays the standard way of passing information inside the markup should be using data-attributes. – GrafiCode Feb 16 '22 at 17:39
0

I think best way is keep separate Html and Js code

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}`
})
Masoud alizadeh
  • 91
  • 4
0

If you want it to be dynamic, do the following:

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>
jeesj
  • 36
  • 6