提交按鈕在提交時不會消失

我的網站上存在表單問題。我希望當你點擊提交按鈕時，按鈕消失，所以用戶不能點擊兩次，導致表單提交兩次。我試圖改變功能，但我不想放棄加載圖標顯示。我可以添加其他功能並添加代碼到提交按鈕在提交時不會消失

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>

來源

2017-08-15 Limoentaart

這可能是因爲，是帶有'hidden_div' id的兩個塊。爲提交按鈕的div塊寫入一個唯一的ID以避免名稱衝突。 –

如果我這樣做，我必須寫一個新的功能代碼，對吧？所以我必須執行這個代碼？所以我需要將它添加到onsubmit部分。我該怎麼做呢？ – Limoentaart

您可以爲您的提交按鈕的div塊提供新的Id，並且可以在相同的函數中編寫邏輯。不需要另一個功能。

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

，並在您的顯示隱藏（）函數：

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

工作plunkr這裏：https://plnkr.co/edit/t18obhP0xxYPtZmf3Ppn?p=preview

來源

2017-08-15 09:40:18

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>

另一種選擇是禁用按鈕，而不是如果隱藏它

來源

2017-08-15 09:43:27 brk

提交按鈕在提交時不會消失

回答

相關問題