getElementById and multiple forms

Question

I am having this situation with many forms (for instance I show you a coupe of them):

<form method="POST" enctype="multipart/form-data">  
<textarea name="content" id="content" class="form-control" required=""></textarea>
   <input name="code" id="code" type="hidden" value="1180224194">
   <input name="postId" id="postId" type="hidden" value="167">  
   <button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
   <textarea name="content" id="content" class="form-control" required=""></textarea>
   <input name="code" id="code" type="hidden" value="95959622661">
   <input name="postId" id="postId" type="hidden" value="144">  
   <button class="btn btn-commenta">Say something</button>
</form>

And I have some javascript like this:

<script type="text/javascript">
   $("form").submit(function (e) {
        e.preventDefault();
        var comment = document.getElementById("content").value;
        var postId = document.getElementById("postId").value;
        var code = document.getElementById("code").value;
        if(comment && postId && code){
        $.ajax({
          type: 'POST',
          ...SOME AJAX
        });
        }
        else {
            console.log("error");
            console.log(comment);
            console.log(postId);
            console.log(code);
        }
        return false;
    });
</script>

Everything works fine when I have a single form (or when I use the first one), but when I try to get the values of the inputs in a different form than the first one, I get an error and my fields are empty.

How can I tell the script to select the values (with getElementById) of the submitted form? I tried with "this" but the console tells me "Cannot read property 'getElementById' of undefined".

Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Nov 01 '17 at 15:19

score 1 · Accepted Answer · answered Nov 01 '17 at 15:16

The id attribute should be unique in the same document, use common classes instead like :

<form method="POST" enctype="multipart/form-data">
  <textarea name="content" class="form-control content" required=""></textarea>
  <input name="code" class="code" type="hidden" value="1180224194">
  <input name="postId" class="postId" type="hidden" value="167">
  <button class="btn btn-commenta">Say something</button>
</form>

Then get the element values using this to refer to the curren form :

var comment = $(".content", this).val();
var postId = $(".postId", this).val();
var code = $(".code", this).val();

Hope this helps.

$("form").submit(function(e) {
  e.preventDefault();
  var comment = $(".content", this).val();
  var postId = $(".postId", this).val();
  var code = $(".code", this).val();

  console.log(comment);
  console.log(postId);
  console.log(code);

  if (comment && postId && code) {
    console.log("ajax query");
  } else {
    console.log("error");
  }
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="POST" enctype="multipart/form-data">
  <textarea name="content" class="form-control content" required=""></textarea>
  <input name="code" class="code" type="hidden" value="1180224194">
  <input name="postId" class="postId" type="hidden" value="167">
  <br>
  <button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
  <textarea name="content" class="form-control content" required=""></textarea>
  <input name="code" class="code" type="hidden" value="95959622661">
  <input name="postId" class="postId" type="hidden" value="144">
  <br>
  <button class="btn btn-commenta">Say something</button>
</form>

that looks a great solution, I am just now having some issues assigning new values to those (variable) inputs, referring to their classes. How can I do it? — Ame, Nov 01 '17 at 15:29

Sophia Price · Answer 2 · 2018-07-13T13:56:47.037

Try using different id's for different elements. Id's should always be unique. If you want to use the same name for multiple elements (e.g for styling) use a class.

I suggest changing your ID's to something like:

<form method="POST" enctype="multipart/form-data">  
<textarea name="content" id="content1" class="form-control" required="">
</textarea>
    <input name="code" id="code1" type="hidden" value="1180224194">
    <input name="postId" id="postId1" type="hidden" value="167">  
    `enter code here`<button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
    <textarea name="content" id="content2" class="form-control" required="">
    </textarea>
    <input name="code" id="code2" type="hidden" value="95959622661">
    <input name="postId" id="postId2" type="hidden" value="144">  
    <button class="btn btn-commenta">Say something</button>
</form>

https://www.w3schools.com/tags/att_global_id.asp W3Schools explains:

"The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id."

getElementById and multiple forms

2 Answers2