javascript - Ajax提交表单有时有效，有时直接重定向到action-url

Question

我在表格中显示了很多带有 foreach 循环的类(class)!每门类(class)都有自己的带有 id 的表单和一个提交按钮!

<form id="kurs<?php echo $result["ID"]; ?>" name="kurs<?php echo $result["ID"]; ?>" action="test.php" method="POST">
...form-field..
<input type="submit" id="submitid" name="submit" class="btn btn-success btn-sm" value="Aktualisieren">
</form>

下面(foreach内部)有这个脚本:

$("#submitid").click(function() {
  $("#kurs<?php echo $result['ID']; ?>").submit(function(e) {
    var postData = $(this).serialize();
    var formURL = $(this).attr("action");
    $.ajax({
      url: formURL,
      type: "POST",
      data: postData,
      success: function(data) {
        $('#item-<?php echo $result["ID"]; ?>').addClass('bg-success border');
        setTimeout(function() {
          $('#item-<?php echo $result["ID"]; ?>').removeClass('bg-success border')
        }, 1500);
      }
    });
    e.preventDefault(); //STOP default action
    e.unbind(); //unbind. to stop multiple form submit.
  });
});

$("#kurs<?php echo $result['ID']; ?>").submit(); 

问题是它只能工作 50%？

有一半的时间表单正常提交并且我登陆 test.php 页面，其他时候，数据得到更新并且该行按应有的方式闪烁绿色几秒钟!

当它工作时它工作，当不工作时我可以重新加载，也许然后它工作!

有人有想法吗？

编辑:我发现如果我通过单击第一个输入来开始一切，一切都会正常工作。如果我从另一行开始，它就不起作用!

Answer 1

The Problem is that it just works 50%? ... Half of the time the form gets normally submitted and i land on the test.php page, the other times, the data gets updatet and the row blinks green for a few seconds as it should be!

我不明白为什么你有两个相同的 .submit() 处理程序...

$("#submitid").click(function() {
      $("#kurs<?php echo $result['ID']; ?>").submit(function(e) {
          .....
          // your ajax()
          .....
      });
});

$("#kurs<?php echo $result['ID']; ?>").submit(); // <-- same as above

一个位于您的 click 处理程序内部并包含 ajax()，另一个位于 click 处理程序外部，并且仅提交给默认值形成 Action 。因此，如果您的 ajax() 没有足够快地到达，那么代码执行将到达第二个提交处理程序并仅提交到默认的 action，这是完全可以理解的。无论首先到达哪个 .submit() 处理程序，都是获胜的处理程序......在您的情况下，真正是抛硬币。

您的表单中已经有一个真正的提交按钮，因此绝对没有理由使用任何 click 处理程序函数，当然也没有理由使用两个 submit 处理程序。

只需这样做...

$("#kurs<?php echo $result['ID']; ?>").submit(function(e) {
      e.preventDefault();
      var postData = $(this).serialize();
      var formURL = $(this).attr("action");
      $.ajax({
           ....
      });
});