0

我在 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 真的要了我的命！

谢谢！

4

5 回答 5

3

在大多数情况下，最好使用submit表单上的事件而不是提交按钮的单击事件。（如果您通过按 Enter 按钮提交表单怎么办？）

$(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"/>
于 2012-06-30T13:20:12.140 回答
2

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

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

<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- 尽管如果你只是特别担心鼠标点击，可能不在这里。

于 2012-06-30T13:43:26.147 回答
1

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

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

所以像

button.onclick = 函数 () {
    this.form.submit();
}
于 2012-06-30T13:18:29.067 回答
1

尝试这个：

$(document).ready(function(){
     $('.submitButton').click(function() {
        $('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');
        $('form').submit();
     });
});
于 2012-06-30T13:21:35.420 回答
0

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

于 2012-06-30T13:34:54.263 回答