Ajax提交表单有时可以正常工作,有时会直接重定向到action-url

时间:2015-03-11 16:49:39

标签: javascript jquery ajax

我在桌子上显示了许多带有foreach循环的课程! 每个课程都有自己的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页面,其他时候,数据获得更新,行闪烁绿色几秒钟,因为它应该是!

当它工作时,它可以工作,当我不能重新加载,然后它可以工作!

有人有想法吗?

修改 我发现如果我通过单击FIRST输入启动所有内容,一切正常。如果我从另一行开始它不起作用!

3 个答案:

答案 0 :(得分:1)

  

问题是它只能工作50%? ...表格正常提交的一半时间我登陆test.php页面,其他时候,数据得到更新,行会闪烁绿色几秒钟,应该是这样!

我不明白为什么你有两个相同的.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({
           ....
      });
});

答案 1 :(得分:0)

在你的js提交函数的第一行放e.preventDefault()

答案 2 :(得分:0)

好的我觉得我遇到了问题!

也许它不是最好的方式,我有嵌套功能,但我不知道如何以其他方式做到这一点,所以对我来说没问题;)

我必须在提交按钮中添加唯一的ID ..

<input type="submit" id="submitid<?php echo $result["ID"]; ?>" name="submit" class="btn btn-success btn-sm" value="Aktualisieren">

             $("#submitid<?php echo $result['ID']; ?>").click(function() {