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

id中

document元素应该是唯一的。在.className，.id个元素替换<form>个重复的<input>。使用事件委派为submit form .className元素添加"abc"个事件;将jQuery()与".link"选择器一起使用，context设置为this在事件处理程序，链.val()以获取当前.value的{{1}}元件。

＆＃13;

<input>

＆＃13;

// 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);
});

＆＃13;

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，请改用class es。

Answer 3

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

以下是更改

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

<强> JS

使用班级选择器＆amp; jquery find方法，用于查找类input

的link

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

  });
});

DEMO

Answer 4

您可以尝试$（＆＃34;表单＆＃34;）提交事件来处理此

$(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();
    });
});

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

5 个答案: