getElementById 和多种形式

Question

我遇到了很多形式的这种情况（例如我给你展示了他们的轿跑车）：

<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>

我有一些 javascript 这样的：

<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>

当我只有一个表单时（或者当我使用第一个表单时）一切正常，但是当我尝试以不同于第一个表单的形式获取输入的值时，我得到一个错误并且我的字段为空。

如何让脚本 select 提交表单的值（使用 getElementById）？我尝试使用 "this" 但控制台告诉我 "Cannot read property 'getElementById' of undefined".

Answer 1

尝试对不同的元素使用不同的 ID。 ID 应该始终是唯一的。如果你想对多个元素使用相同的名称（例如样式），请使用 class.

我建议将您的 ID 更改为：

<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 解释：

"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."

Answer 2

id 属性在同一个文档中应该是唯一的，使用常见的类而不是像 :

<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>

然后使用this获取元素值以引用当前形式：

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

希望对您有所帮助。

$("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>

getElementById 和多种形式

getElementById and multiple forms

javascript

jquery

forms

getelementbyid

multiple-forms