javascript - 提交后提交按钮不会消失

Question

我的网站上的表单有问题。我希望当您点击“提交”按钮时，该按钮会消失，因此用户无法单击两次，从而导致表单提交两次。我尝试过更改功能，但我不想放弃显示加载图标。我可以添加另一个功能并添加代码吗

onsubmit="showHide(); return true;"

？所以它执行2个函数？提前致谢!

<script src="https://www.google.com/recaptcha/api.js?hl=nl" async defer>
</script>
<script 
type="text/javascript">
function showHide() {
var div = document.getElementById("hidden_div");
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
return false;
}
}
</script>

<style>
div.g-recaptcha {
margin: 0 auto;
width: 304px;
}
</style>

<form name="form2" method="POST" onsubmit="showHide(); return true;" action="/BESTANDEN/phps/JocanasNLsuggest.php">
Ideeën voor nieuwe films, TV-series, games of functies:<br><textarea class="input" name="comment" rows="5" cols="30" required></textarea><br><br>
<div class="g-recaptcha" data-sitekey="-----" data-theme="dark"></div>

<div id="hidden_div" style="display:none">
<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>
</div>
<div id="hidden_div" style="display:block">
<input type="submit" value="Voorstellen" name="submit">
</div>
</form>

Answer 1

您可以向提交按钮的 div block 提供新的 ID，并可以在同一函数中编写逻辑。不需要其他功能。

 <div id="hidden_div1" style="display:block">
<input type="submit" value="Voorstellen" name="submit">
</div>

在你的 showHide() 函数中:

var div1 = document.getElementById("hidden_div1");
div1.style.display='none';

这里的工作plunkr:https://plnkr.co/edit/t18obhP0xxYPtZmf3Ppn?p=preview