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>

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

如何告诉脚本选择提交表单的值（使用getElementById）？我尝试使用“this”，但控制台告诉我“无法读取undefined 的属性'getElementById'”。

Answer 1

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>

Answer 2

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

我建议将您的 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.aspW3Schools 解释：

"id 属性为 HTML 元素指定一个唯一的 id（值 在 HTML 文档中必须是唯一的）。

id 属性最常用于指向样式表中的样式， 并通过 JavaScript（通过 HTML DOM）来操作元素 具体的id。”