如何获得动态创建的表单的价值？

Question

这是下面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>

在js中，我试图获取被单击的表单的输入值。

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

但是无论我提交哪种表格，我总是得到第一表格的输入值。 我知道我做错了这件事，您能解释一下我如何获取当前提交的表单的输入值。

Answer 1

document中元素的id应该是唯一的。 将.className替换为<form>和<input>元素上的重复.id 。 使用事件委托为具有.className "abc" form元素附加submit事件； 使用带有".link"选择器的jQuery()和在事件处理程序上设置this context ，链接.val()以获得当前<input>元素的.value 。

 // dynamic `html` var html = `<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 () { $(document).on("submit", ".abc", function (e) { var bla = $(".link", this).val(); alert(bla); e.preventDefault(); }); $("body").append(html); }); 

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

Answer 2

在处理动态创建的表单元素时，绑定其事件，同时将document带入上下文，即$(document).on("event_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，而应使用es class 。

Answer 3

id应该始终是唯一的。在您的情况下，使用class作为公共选择器

这是变化

的HTML

id被替换为class

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

JS

使用类选择器和jquery find方法查找具有类link的input

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

  });
});

演示

Answer 4

您可以尝试$（“ form”）提交事件来处理此问题

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

这是工作示例： https : //jsfiddle.net/e7r14p3t/

Answer 5

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

HTML：

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

JavaScript：

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