forms - 使用jquery提交表单后调用函数

Question

我试图在提交任何具有下面显示的类的表单后调用一个函数。但是，这似乎对我不起作用（表单提交，但提交按钮保持活动状态并且未显示加载图像）。

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

这是一些 HTML：

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

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

有没有人认为这有什么本质上的错误会阻止事情正常工作？

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

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

Answer 1

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

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

例如：

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

Answer 2

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

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

});

Answer 3

有一个名为jQuery Form Plugin的 jQuery 插件，它可以帮助您从 ajax 提交您的表单而无需刷新，然后您可以在其成功后执行其余操作（这恰好在成功提交表单后发生）：

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

Answer 4

试试别的：

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