Question

我有一个简单的小表单需要花费几秒钟来处理。我想做两件事：

停用提交按钮，以便用户多次点击
在处理表单时显示进度条。

我有以下内容：

<script type="text/javascript">
    function myFunction() {
      document.getElementById('submit').disabled = true; 
      document.getElementById('prog').style.display = 'block';
    }
</script>

<form method="POST" action="/page" onsubmit="myFunction();">
  <input type="text" />
  <div id="prog" class="progress" style="display:none;">
    <div class="bar" style="width: 100%"></div>
  </div>
  <button id="submit" type="submit">Submit</button>
</form>

但是，当我提交表单时，我看到提交按钮被禁用，进度条显示但表单实际上没有得到处理。如果我注释掉禁用提交按钮的部分，则表单正常提交，我会看到进度条。

为什么禁用提交按钮搞砸了表单提交？

Answer 1

您可以将按钮类型从submit更改为button 并且，点击javascript函数中的按钮提交表单

试试这段代码..

＆＃13;

<script type="text/javascript">
    function myFunction() {
      document.getElementById('submit').disabled = true; 
      document.getElementById('prog').style.display = 'block';
      document.getElementById('myForm').submit();
    }
</script>

<form method="POST" action="/page" id="myForm">
  <input type="text" />
  <div id="prog" class="progress" style="display:none;">
    <div class="bar" style="width: 100%"></div>
  </div>
  <button id="submit" type="button" onclick="myFunction();">Submit</button>
</form>

＆＃13;

为什么禁用提交按钮会干扰表单提交？

1 个答案: