Question

标有 NEWFORM 的按钮可在点击时创建新表单。每个表单都有一个提交按钮。单击每个表单的提交按钮时，该表单的值将通过AJAX发送。我的代码第一次运行良好，但是当创建并提交新表单时，所有表单的所有值都将一起发送。

这是我的代码：

$(document).ready(function() {
  $(".newform").click(function() {
    $(".MyForm")
    .eq(0)
    .clone()
    .show()
    .insertAfter(".MyForm:last");
  });

  $(document).on('click', '.MyForm button[type=submit]', function(e) {
    e.preventDefault() // To make sure the form is not submitted 
    $('.MyForm').each(function() {
     console.log($(this).serialize())
      $.ajax(
        $(this).attr('action'), 
        {
          method: $(this).attr('method'),
          data: $(this).serialize()
        }
      )
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="newform">NEWFORM+</span>
<div class="all">
  <form class="MyForm" method="post">
    <input type="text" placeholder="name" value="Aynaz" name="a1" />
    <select name="Avg">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</div>

Answer 1

您迭代解决方案中的所有“.MyForm”对象，因此所有这些对象都已提交，您需要首先在onClick中确定正确的表单，然后提交它：

$(document).ready(function() {
  $(".newform").click(function() {
    $(".MyForm")
    .eq(0)
    .clone()
    .show()
    .insertAfter(".MyForm:last");
  });

  $(document).on('click', '.MyForm button[type=submit]', function(e) {
    e.preventDefault() // To make sure the form is not submitted 
    var $frm = $(this).closest('.MyForm');
    console.log($frm.serialize());
    $.ajax(
        $frm.attr('action'), 
        {
          method: $frm.attr('method'),
          data: $frm.serialize()
        }
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="newform">NEWFORM+</span>
<div class="all">
  <form class="MyForm" method="post">
    <input type="text" placeholder="name" value="Aynaz" name="a1" />
    <select name="Avg">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</div>

Answer 2

            $(document).ready(function() {
              $(".newform").click(function() {
                $(".MyForm")
                .eq(0)
                .clone()
                .show()
                .insertAfter(".MyForm:last");
              });

              $(document).on('click', '.MyForm button[type=submit]', function(e) {
                e.preventDefault() // To make sure the form is not submitted 
               var $this = $(this).closest("form");
                 console.log($this.serialize())
                  $.ajax(
                    $(this).attr('action'), 
                    {
                      method: $this.attr('method'),
                      data: $this.serialize()
                    }
                  )
                });
            });

Answer 3

你可以这样做

$(document ).on('submit', '.myForm', function(e) {
    e.preventDefault()
    $.ajax({
        type: 'post',
        data: $(this).serialize(),
        url: 'submit.php'
    })
})

问题在于您$(this)

的上下文应用

如何单独提交附加表格

3 个答案: