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请求之前停止了提交事件，因此，要使提交发生，您必须重新执行它。你确实试图这样做，但你实际做的是重新触发jquery提交事件处理程序。要提交表单，请选择表单节点并直接触发它的提交方法（绕过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();
    });    
});

我也切换到正确使用提交事件，如果您使用点击，用户可以通过按输入输入来绕过您的点击事件处理程序。另外，从按钮中删除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');
          }
        });
    });
});

修改

不是在提交按钮上侦听click事件，而是最好在窗体上侦听提交事件。这样，event.preventDefault（）可以更加一致地工作。我已经在变量中缓存了jQuery对象，并在成功回调中使用了它。我还在console.log(succ)之后添加了一个半冒号 - JavaScript不需要半冒号，但解释器有时会遇到问题。务必正确使用它。

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) {

.submit（）在$ .ajax请求期间无法正常工作

4 个答案: