Firefox 和 Jquery/Javascript 表单提交

Question

我在 Firefox 中遇到问题，我试图让一个表单提交按钮在有人点击它时显示“正在加载”（以防止用户多次提交由于速度慢而点击它两次/三次网站）。

我有这个 jquery 代码：

$(document).ready(function(){
     $('.submitButton').click(function() {
        document.aform.submit();
        $('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');

     });
});

Chrome 可以正确执行它，但 Firefox 仅 更改了 span 周围的 HTML，但 不 提交表单。当我单击按钮两次时，Firefox 提交。如果我删除 .html() 更改的行，它也可以毫无问题地提交。

以下是表格代码供参考：

<form name="aform" action="index.php" enctype="multipart/form-data" method="post">
    ...form data
    <span class="buttonSpan">
         <button class="btn btn-primary submitButton" name="submit"/>Submit</button>
    </span>
</form>

firefox 是否会优先考虑 html 更改而忽略其他所有内容？同样，这在 Chrome 中运行良好，但 firefox 真的要了我的命！

谢谢！

Answer 1

对我有用，但在其单击处理程序期间从文档中删除按钮似乎可能会导致不一致的行为：提交表单的默认操作是否适用于在单击时拥有它的表单，或在 post- click-event-time 默认动作触发（无表单）？

避免这种歧义 - 不要通过用新标记替换按钮来破坏按钮。相反，改变它：

<button type="submit" class="btn btn-primary submitButton" name="submit">Submit</button>

$('.submitButton').click(function() {
    $(this).text('Loading...');
    $(this).removeClass('submitButton');
    $(this).addClass('disabled');
});

请注意，(a) 您不需要调用form.submit()，因为无论如何这是提交按钮的默认操作； (b) 正如 Munter 所说，document.namedElement 是不好的形式，(c) 正如 d_inevitable 所说，挂钩 form.onsubmit 几乎总是比 button.onclick 更好的事情 - 虽然如果你特别担心鼠标，可能不在这里点击。

Answer 2

这是一个工作示例：在 FF http://jsfiddle.net/JV68U/ 上测试

Answer 3

在大多数情况下，最好在表单上使用submit 事件而不是提交按钮的单击事件。 （如果你按回车键提交表单呢？）

$(function(){
     $('form[name=aform]').submit(function() {
        $('.buttonSpan', this).html('<button class="btn btn-primary disabled">Loading...</button>');

     });
});

使用此功能时，您需要修复提交按钮的 html，如下所述。

否则我建议找到与提交按钮相关的表单：

$(function(){
     $('.submitButton').click(function() {
         $(this).closest("form").submit()
        .find('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');

     });
});

定义提交按钮的正确方法是这样的：

<input type="submit" class="btn btn-primary submitButton" value="Submit" name="submit"/>

Answer 4

试试这个：

$(document).ready(function(){
     $('.submitButton').click(function() {
        $('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');
        $('form').submit();
     });
});

Answer 5

不建议像在document.aform 中那样按名称访问 dom 元素。

由于您已经在表单中拥有按钮，因此您应该使用按钮 .form 属性。

有点像

button.onclick = 函数 () { this.form.submit(); }