Question

我在firefox中遇到问题，我正在尝试获取一个表单提交按钮，以便在用户点击它时显示“加载”（以防止用户因为缓慢而多次提交用户点击两次/三次位点）。

我有这个jquery代码：

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

     });
});

Chrome正确执行，但Firefox 仅更改了周围的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

在大多数情况下，最好在表单上使用submit事件，而不是使用提交按钮的click事件。（如果按回车按钮提交表格怎么办？）

$(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 2

适用于我，但在单击处理程序期间从文档中删除按钮似乎可能导致不一致的行为：提交表单的默认操作是否适用于在点击时或在后期拥有它的表单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 3

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

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

类似

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

Answer 4

试试这个：

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

Answer 5

以下是一个工作示例：在FF http://jsfiddle.net/JV68U/

上测试

Firefox和Jquery / Javascript表单提交

5 个答案: