使用jQuery提交HTML表单不起作用

时间:2017-07-28 21:25:43

标签: javascript jquery html forms

TL; DR:我尝试使用jQuery提交表单,但它不起作用。

当用户提交表单时,我需要进行ajax调用。表单的操作在我的站点之外,因此我需要在实际提交之前捕获表单提交 这确实在某些方面有效,但现在它没有,由于某种原因我无法弄清楚,我比较了它停止工作之前和之后的提交并且没有代码更改所以我不知道它可能是什么。
表格是常规的,有POST方式,动作,没什么奇怪的 有什么想法吗?

这个想法是,当用户提交表单时,提交处理程序会阻止常规提交并执行Ajax调用 当AJAX调用返回时,再次调用submit事件,这次处理程序什么也不做,并且不会阻止常规提交,返回true,所以它应该将表单提交到其操作URL,但是不会发生。

<script>
var do_ajax_submit = true;

function manual_submit() {
    do_ajax_submit = false;
    $("form#lead_subscribe").submit();
}

$(function(){
    $("form#lead_subscribe").submit( function( ev )
    {
        var das = do_ajax_submit;
        if( do_ajax_submit )
        {
            do_ajax_submit = false;
            ev.preventDefault();

            $.ajax({
                url: "/someAjaxCall",
                method: "POST",
            })
            .always( function() {
                manual_submit();
            });
            return false;
        }
        return true;
    });
});
</script>

1 个答案:

答案 0 :(得分:1)

目前尚不清楚为什么代码应该有效,然后停止工作。

有一件事是肯定的。通过使用本机formNode.submit而不是jQuery的$("form#lead_subscribe").submit();触发表单提交,事件处理程序不会重新提交提交。因此,do_ajax_submit标志是不必要的,javascript会显着清理。

$(function() {
    $("form#lead_subscribe").on('submit', function(ev) {
        ev.preventDefault();
        var formNode = this;
        $.ajax({
            url: "/someAjaxCall",
            method: "POST"
        })
        .always(function() {
            formNode.submit(); // native .submit() will not be re-intercepted by this submit handler.
        });
    });
});

这次清理有可能解决问题。很难说。