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元素加载到DOM之前，处理函数与form事件的绑定可能正在发生。

理想情况下，只有在DOM加载完成后才应绑定事件处理程序。

例如：

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

Answer 2

尝试其他方法：

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

Answer 3

在提交输入/按钮上输入一个ID，然后尝试：

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

});

Answer 4

有一个名为 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
    }

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

4 个答案: