Firefox 和 Jquery/Javascript 表单提交

Firefox and Jquery/Javascript form submission

本文关键字：Javascript 表单提交 Jquery Firefox      更新时间：2023-09-26

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

我有这个jquery代码：

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

Chrome 可以正确执行它，但 Firefox 只会更改周围的 HTML，但不会提交表单。当我点击两次按钮时，火狐提交。如果我删除 .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真的要了我的命！

谢谢！

在大多数情况下，最好使用表单上的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"/>

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

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

<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）正如蒙特所说，document.namedElement是糟糕的形式，（c）正如d_inevitable所说，钩form.onsubmit几乎总是比button.onclick更好的事情 - 尽管如果您特别担心鼠标点击，可能不在这里。

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

由于窗体中已有按钮，因此应使用按钮.form属性。

所以像

按钮点击 = 函数 （） {    this.form.submit（）;}

试试这个：

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

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

相关文章：