Javascript 如何获取动态创建的表单的值？

下面是在我的代码中动态生成的3个表单

<form id="abc">
   <input id="link" value ="aa">name
   <button type="submit">Submit</button>
</form>
<form id="abc">
   <input id="link" value ="bb">name
<button type="submit">Submit</button>
</form>
<form id="abc">
   <input id="link" value ="cc">name
<button type="submit">Submit</button>
</form>

但无论我提交哪种形式，我总是得到第一种形式的输入值。我知道我做错了，你能解释一下我如何获得当前提交的表单的输入值吗。

HTML ID应该只用于每个元素。对于多个元素，应该使用class属性，可以在jQuery中使用$'.abc'选择该属性

HTML:

---

在处理动态创建的表单元素时，在将文档放入上下文时绑定其事件，即$document.onevent_name、'dynamic_element'，function{…}

因此，以下代码适用于您的情况

$(document).on("submit", 'form.abc', function(){ 
    ... // you can get the form elements value here.
    var bla = $(this).find('.link').val();
    alert(bla);     
    e.preventDefault();
});

注意：避免对多个元素使用相同的id，而是使用类。

文档中元素的id应该是唯一的。用.className替换元素处的重复.id。使用事件委派为具有.className abc的表单元素附加提交事件；使用jQuery，在事件处理程序chain.val中将.link选择器和上下文设置为this，以获取当前元素的.value。 //动态html` 变量html=` 名称 提交 名称 提交 名称 提交 `; $document.readyfunction{ $document.onsubmit、.abc、函数e{ var bla=$.link，this.val； alertbla； e、 防止违约； }; $body.html； }; id应该始终是唯一的。在您的情况下，使用类作为公共选择器

这些是变化

HTML

id被替换为类

<form class="abc">
  <input class="link" value="aa">name
  <button type="submit">Submit</button>
</form>
<form class="abc">
  <input class="link" value="bb">name
  <button type="submit">Submit</button>
</form>
<form class="abc">
  <input class="link" value="cc">name
  <button type="submit">Submit</button>
</form>

---

您可以尝试$form submit事件来处理此问题

$(document).ready(function () {
  $("form").submit(function(e) { 
    var bla = $(this).find('#link').val();
    alert(bla);     
    e.preventDefault();
  });
});

---

这是一个工作示例：

文档中元素的id应该是唯一的。如果说表单是动态添加的，这对动态添加的表单不起作用！你不认为公认的答案是错误的吗？因为表单是动态的added@YogeshMistry我没有注意到。OP在依赖事件处理程序的结果时会注意到。我认为他不会。因为他已经接受了答案。真奇怪。人们会无意中发现这个问题，并认为公认的答案是错误的！：我想他不会的。如果表单实际上是动态的，OP可能会注意到。尽管需要注意，如果将事件附加到元素的javascript在html附加到文档之后附加到文档，则接受答案处的模式应该返回预期结果。如果是这样，从OP的回答或反馈中不清楚。

$(document).on("submit", 'form.abc', function(){ 
    ... // you can get the form elements value here.
    var bla = $(this).find('.link').val();
    alert(bla);     
    e.preventDefault();
});

<form class="abc">
  <input class="link" value="aa">name
  <button type="submit">Submit</button>
</form>
<form class="abc">
  <input class="link" value="bb">name
  <button type="submit">Submit</button>
</form>
<form class="abc">
  <input class="link" value="cc">name
  <button type="submit">Submit</button>
</form>

$(document).ready(function() {
  $('.abc').submit(function(e) {
    e.preventDefault();
    var bla = $(this).find('input.link').val();
    alert(bla);

  });
});

$(document).ready(function () {
  $("form").submit(function(e) { 
    var bla = $(this).find('#link').val();
    alert(bla);     
    e.preventDefault();
  });
});