jQuery 使用jquery提交表单后调用函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15361417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 14:54:00  来源:igfitidea点击:

Call a function after a form is submitted using jquery

formsjquery

提问by Shackrock

I'm trying to call a function after any form with the class shown below is submitted. However, this doesn't seem to be working for me (the form submits, but the submit button remains active and the loading image is not shown).

我正在尝试在提交具有如下所示类的任何表单后调用函数。但是,这似乎对我不起作用(表单提交,但提交按钮保持活动状态并且未显示加载图像)。

$(document).ready(function() {
    $('.uniForm').submit(function() {
      $('#loadingImage').show();
      $(':submit',this).attr('disabled','disabled');
      return true;
    });
});

Here's some HTML:

这是一些HTML:

<form class="uniForm" id="formABC">
//...form.... here
</form>

<img src="loadimage.gif" style="display: none;" id="loadingImage">

does anyone see anything inherently wrong with this that would be preventing things from working correctly?

有没有人看到这会阻止事情正常工作的内在错误?

I have a feeling it's just not being called correctly. Can I call it myself via some HTML like this?

我有一种感觉,它只是没有被正确调用。我可以通过这样的 HTML 自己调用它吗?

<button type="button" class="primaryAction" alt="Submit Form" onclick="$('#formABC').submit();">Submit Form</button>

回答by Boaz - Reinstate Monica

Following your comment, it seems the binding of the handler function to the submitevent might be taking place before the formelement has been loaded into the DOM.

根据您的评论,似乎submit在将form元素加载到 DOM之前,可能会发生将处理程序函数绑定到事件。

Ideally, you should bind event handlers only after the DOM has finished loading.

理想情况下,您应该仅在 DOM 完成加载后绑定事件处理程序。

For example:

例如:

$(document).ready(function() {
    $('.uniForm').submit(function() {
        ...
    });
});

回答by TomekBrzyn

Try something else:

试试别的:

$('.uniForm input[type=submit]').click(function(){
    $('.uniForm').submit();
    //doStuffafterSubmit
});

回答by user1236048

Put an id on the submit input/button and try this:

在提交输入/按钮上放置一个 id 并尝试以下操作:

$('#mySubmitButton').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).attr('disabled','disabled');
    $('#loadingImage').show(function() {
        $(this.form).submit();
    });

});

回答by Mojtaba Rezaeian

There is a jQuery plugin named jQuery Form Pluginwhich helps to submit your form from ajax without refresh and then you can do the rest of actions on its success (which occurs exactly after successful form submission):

有一个名为jQuery Form Plugin 的 jQuery 插件,它有助于在不刷新的情况下从 ajax 提交表单,然后您可以在其成功时执行其余操作(这恰好发生在成功提交表单之后):

    jQuery(document).ready(function () {
        jQuery('#my_submit_button').click(function (e) {
            jQuery(this.form).ajaxForm({
                target: false,
                success: function ()
                {
                    your_other_stuff();
                },
            });
        });
    });
    function your_other_stuff(){
        // rest of things
    }