送信ボタンが送信時に消えない

Question

私のウェブサイトのフォームに問題があります。送信ボタンを押すと、ボタンが消えてユーザーが2回クリックしてフォームを2回送信できなくなります。私は関数を変更しようとしましたが、ロードアイコンが表示されないようにしたくありません。別の機能を追加してコードを追加することはできますか

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'; 

作業plunkr：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>

代替オプションを実行文句を言わないボタンを非表示にするには、コードが