简体   繁体   English

用jQuery提交HTML表单不起作用

[英]Submitting an HTML form with jQuery doesn't work

TL;DR: I try to submit the form with jQuery but it doesn't work. TL; DR:我尝试使用jQuery提交表单,但是它不起作用。

I need to do an ajax call when a user submits a form. 当用户提交表单时,我需要进行ajax调用。 The action of the form is outside my site, so I need to trap the form submission at this point before it's actually submitted. 表单的操作不在我的网站范围内,因此我需要在此之前提交表单,然后再实际提交表单。
This did work at some point, but now it doesn't, for some reason I can't figure out, I compared the commits before and after it stopped working and there was no code change so I don't know what it may be. 这确实在某个时候起作用了,但是由于某种原因,我现在不知道了,我比较了它停止工作之前和之后的提交,并且没有代码更改,所以我不知道它可能是什么。
The form is a regular one, with POST method, an action, nothing strange. 该表单是常规表单,带有POST方法,一个动作,没什么奇怪的。
Any ideas? 有任何想法吗?

The idea is that when the user submits the form the submit handler prevents the regular submit and does the Ajax call. 这个想法是,当用户提交表单时,提交处理程序将阻止常规提交并执行Ajax调用。
When the AJAX call returns, the submit event is called again, this time the handler does nothing and doesn't prevent the regular submit, returns true, so it should submit the form to its action URL, but it doesn't happen. 当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>

It's not clear why the code should have worked, then stopped working. 目前尚不清楚为什么代码应该工作然后停止工作。

One thing is for certain. 一件事可以肯定。 By triggering form submission with the native formNode.submit instead of jQuery's $("form#lead_subscribe").submit(); 通过使用本地的formNode.submit而不是jQuery的$("form#lead_subscribe").submit();触发表单提交$("form#lead_subscribe").submit(); , the submission will not be re-intercepted by the event handler. ,提交将不会被事件处理程序重新拦截。 Therefore the do_ajax_submit flag is unnecessary and the javascript cleans up significantly. 因此, 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.
        });
    });
});

There's a chance that this clean-up will also fix the problem. 此清理还可能会解决此问题。 Hard to say. 很难说。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM