表单提交按钮有时不工作

Form submit button is not working sometimes

本文关键字：工作 按钮 表单提交      更新时间：2023-09-26

我开发了一个测验模块，每当用户点击submit按钮时，按钮就会获得disabled，然后重定向到下一个问题。

现在的问题是，有时submit按钮没有响应约4-5或更多的点击，然后突然提交的形式，导致4-5个问题的跳过。我试过用document.form.submit甚至jQuery('#question_form').submit()。但是仍然很少有用户报告同样的问题。

我无法为自己创造同样的场景。

在我的视图页我有:

   <form id="question_form" style="text-align:center;" name="question_form" method="post" action="/exam/259/calc_current_score?name=question" accept-charset="UTF-8">
    <!-- some fields to be submitted -->
    <input type="submit" value="Submit" onclick="changeButtonText(event,this.form);" name="submit_button" id="submit_button" class="exam-btn-primary">
    </form>
   <script type="text/javascript">
    function changeButtonText(e,form){
//if validation is true then it submits the form like this
        error_notification.style.display="none";
        form.submit();
        jQuery('#submit_button').css({'background-color':'#C3CACD'});
        form.submit_button.disabled=true;
        return true;
//else if the validation fails then 'submit button' is not disabled
        e.preventDefault();
    }
    </script>

所以，主要的问题是，即使用户在选择一个选项后点击提交按钮，表单也不会被提交(最终会重定向到下一页)，按钮也不会得到disabled(当验证成功时按钮的颜色也会改变)，所以他们会继续点击，这主要发生在Google Chrome。我不知道是网络连接慢还是资源加载时间过长。

用户报告说，有时他们必须点击多次才能提交问题的答案，而每当他们点击多次时，问题就会被跳过。例如，如果他们在submit button上点击x次，他们就会进入x问题，因此他们无法得分。

我也遇到过类似的问题。在我的例子中，Android平板电脑上的浏览器有时会在一次点击中运行ontouch事件和onclick事件。当用户在点击提交按钮后快速点击任何其他地方时，就会发生这种情况。当在ontouch和onclick同时调用preventDefault();时，问题得到了解决。检查用户使用的浏览器和终端类型如何?

添加:

好的，你的实际问题是"提交按钮被点击，即使它是禁用的"，不是吗?

试试这个

<script type="text/javascript">
    function changeButtonText(e,form){
        form.submit_button.disabled=true;
//if validation is true then it submits the form like this
        error_notification.style.display="none";
        jQuery('#submit_button').css({'background-color':'#C3CACD'});
        form.submit();
//else if the validation fails then 'submit button' is not disabled
        form.submit_button.disabled=true;
        e.preventDefault();
    }
</script>

这都是因为jQuery在windows XP机器上被阻止了。但我仍然删除了submit标签，并使用div标签作为按钮，它解决了问题。

相关文章：