.submit（）在$ .ajax请求期间不起作用

Question

恐怕我无法向这个问题发布jsFiddle，并且我相信这只是没有通过success:函数传递正确参数的问题，但是运行了此脚本的表单不会提交两次。

我们希望通过ajax请求将信息提交到email_script.php ，然后也通过表单的默认action标签提交信息。

它正确提交了ajax请求，但是没有第二次提交（尽管控制台确实将succ = 1到success: function() 。

$(function() {
    $('#submit').click(function() {
        var dataObject = "email=web@ukipme.com&accName=accname&listName=listname";
        console.log(dataObject);
        $.ajax({
          url: "email_script.php",
          data : dataObject,
          type : "GET",
          success: function(){
            $("#subscribe_form").submit();
            var succ = "1";
            console.log(succ)
            alert('success');
          }
        });
        event.preventDefault();
    });

});

表单HTML：

<form action="https://ukipmemail.com/interface/list.php" method="post" class="form-horizontal" role="form" id="subscribe_form">
    <input type="hidden" name="accName" value="accname"/>
    <input type="hidden" name="listName" value="listname"/>
    <input type="hidden" name="fullEmailValidationInd" value="Y"/>
    <input type="hidden" name="doubleOptin" value="false"/>
    <input type="hidden" name="successUrl" value="NO-REDIRECT"/>
    <input type="hidden" name="errorUrl" value=""/>
    <div class="form-group">
        <div class="col-sm-offset-1 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="checkbox"> I would like to register to receive news about Automotive Interiors Expo 2014
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-1 control-label sr-only">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="web@ukipme.com" disabled>
        </div>
    </div>
    <div class="form-group text-right">
        <div class="col-sm-offset-1 col-sm-10">
            <button type="submit" class="btn btn-success" id="submit" disabled>Subscribe</button>
        </div>
    </div>
</form>

文件中使用的其他Javascript：

$('#checkbox').click(function() {
    $('#submit').attr("disabled", !$('#checkbox').is(":checked"));
});

Answer 1

在执行ajax请求之前，您已停止了Submit事件，因此，要使提交发生，您必须重新执行它。 您确实尝试过这样做，但是实际上是重新触发了jQuery提交事件处理程序。 要提交表单，请选择表单节点并直接触发它的submit方法（绕过jQuery绑定事件）

$(function() {
    $("#subscribe_form").submit(function(event) {
        var dataObject = "email=<?=$email?>&accName=<?=$accName?>&listName=<?=$listName?>";
        console.log(dataObject);
        $.ajax({
            url: "email_script.php",
            data : dataObject,
            type : "GET",
            success: function(){
                $("#subscribe_form").get(0).submit();
                var succ = "1";
                console.log(succ)
                alert('success');
            }
        });
        event.preventDefault();
    });    
});

我还切换为正确使用Submit事件，如果您改为使用click，则用户可以通过在输入上按Enter来绕过click事件处理程序。 另外，从您的按钮（ 非常重要！ ）中删除ID，并将其设为提交按钮。

Answer 2

要触发默认的表单提交，请在表单的jQuery对象上使用[0].submit() ，同时还要记住将事件传递给处理程序。 将event.preventDefault()放在顶部始终是一个好习惯。

$(function() {
    $('#subscribe_form').submit(function( event ) {
        event.preventDefault();
        var dataObject = "email=<?=$email?>&accName=<?=$accName?>&listName=<?=$listName?>",
        that = $(this);
        console.log(dataObject);
        $.ajax({
          url: "email_script.php",
          data : dataObject,
          type : "GET",
          success: function(){
            that[0].submit();
            var succ = "1";
            console.log(succ);
            alert('success');
          }
        });
    });
});

编辑

与其监听提交按钮上的单击事件，不如监听表单上的提交事件。 这样event.preventDefault（）会更一致地工作。 我已经将表单jQuery对象缓存在该变量中，并在成功回调中使用了它。 我还在console.log(succ)之后添加了分号console.log(succ)不需要分号，但有时解释器可能会遇到问题。 始终正确使用它。

Answer 3

更好的用法正如Rory在评论中提到的，您没有将事件对象传递给处理程序。

$(function() {
    $('#submit').click(function(event) {
        var dataObject = "email=<?=$email?>&accName=<?=$accName?>&listName=<?=$listName?>";
        console.log(dataObject);
        event.preventDefault();
        $.ajax({
          url: "email_script.php",
          data : dataObject,
          type : "GET",
          success: function(){
            $("#subscribe_form:submit").trigger("submit");
            var succ = "1";
            console.log(succ)
            alert('success');
          }
        });
    });

});

Answer 4

您是否尝试使用.on（）函数？

$(document).on('click','#submit', function(event) {