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块提供新的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';

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

Answer 2

id必须是唯一的。为按钮提供单独的ID。此外，您需要使用防止默认行为，否则隐藏按钮的代码将不会执行

function showHide(e) {
  e.preventDefault()
  var div = document.getElementById("hidden_div_button-container");
  if (div.style.display == 'none') {
    div.style.display = '';
  } else {
    div.style.display = 'none';
    return false;
  }
}

div.g-recaptcha {
  margin: 0 auto;
  width: 304px;
}

<script src="https://www.google.com/recaptcha/api.js?hl=nl" async defer>
</script>
<form name="form2" method="POST" onsubmit="showHide(event); 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_button-container" style="display:block">
    <input type="submit" value="Voorstellen" name="submit">
  </div>
</form>

另一种选择是隐藏按钮而不是隐藏它

提交按钮不会在提交时消失

2 个答案: