如果需要，在表單提交時停止加載圖像字段

Question

在https://bm-translations.de/#kontakt我有一個帶有提交按鈕的表單，點擊時用加載gif代替。

問題是：如果其中一個必填字段未設置，表單不提交，但加載gif出現並且不會消失。只有在設置了所有必填字段的情況下才會出現如何表達

這是HTML：

<div id="formsubmitbutton"> 
<input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()"> 
</div> 
<div id="buttonreplacement" style="margin-left:30px; display:none;"> 
<img src="./bilder/preload.gif" alt="loading..."> 
</div> 

這是JS：

function ButtonClicked() 
{ 
    document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay 
    document.getElementById("buttonreplacement").style.display = ""; // to display 
    return true; 
} 
var FirstLoading = true; 
function RestoreSubmitButton() 
{ 
    if(FirstLoading) 
    { 
     FirstLoading = false; 
     return; 
    } 
    document.getElementById("formsubmitbutton").style.display = ""; // to display 
    document.getElementById("buttonreplacement").style.display = "none"; // to undisplay 
} 
// To disable restoring submit button, disable or delete next line. 
document.onfocus = RestoreSubmitButton; 

Answer 1

在這裏，你去了一個解決方案https://jsfiddle.net/z7wfj880/2/

ButtonClicked = function(){ 
 
    var validate = true; 
 
    $('input:required').each(function(){ 
 
     if($(this).val().trim() === ''){ 
 
     validate = false; 
 
     } 
 
    }); 
 
    if(validate) { 
 
     document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay 
 
     document.getElementById("buttonreplacement").style.display = ""; // to display 
 
     return true; 
 
    } 
 
} 
 
var FirstLoading = true; 
 
function RestoreSubmitButton() 
 
{ 
 
    if(FirstLoading) 
 
    { 
 
     FirstLoading = false; 
 
     return; 
 
    } 
 
    document.getElementById("formsubmitbutton").style.display = ""; // to display 
 
    document.getElementById("buttonreplacement").style.display = "none"; // to undisplay 
 
} 
 
// To disable restoring submit button, disable or delete next line. 
 
document.onfocus = RestoreSubmitButton;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" placeholder="First Name" required/> 
 
<input type="text" placeholder="Middle Name"/> 
 
<input type="text" placeholder="Last Name" required/> 
 

 
<div id="formsubmitbutton"> 
 
    <input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()"> 
 
</div> 
 
<div id="buttonreplacement" style="margin-left:30px; display:none;"> 
 
    <img src="./bilder/preload.gif" alt="loading..."> 
 
</div>

首先不要的trim需要input字段，這樣如果任何用戶提供空間，它將刪除前面&末尾的多餘空格。

Loop通過所有需要的input &檢查空輸入。

Answer 2

檢查必填字段validation。

如果設置了所有字段，則只能撥打buttonreplacement。

例如：如果您有字段field1和field2。

f1 = document.getElementById("id_field1").value; 
f2 = document.getElementById("id_field2").value; 

if (f1!=null || f1!=undefined || f1!="" || f2!=null || f2!=undefined || f2!=""){ 
    document.getElementById("buttonreplacement").style.display = "none"; 
} 
else{ 
     document.getElementById("buttonreplacement").style.display = "block"; 
    } 

您可以隨時使用Jquery改進您的代碼。

Answer 3

您可以創建一個模塊化功能來顯示和隱藏loader。

現在當您點擊submit按鈕時，您可以輕鬆地檢查您的表單驗證和toggle加載程序。我對false進行了硬編碼，但您可以檢查相應的驗證。

function displayLoading(form, loader) { 
 
    document.getElementById("formsubmitbutton").style.display = form; // to undisplay 
 
    document.getElementById("buttonreplacement").style.display = loader; // to display 
 
} 
 

 
function ButtonClicked() 
 
{ 
 
    if(false) { // form in valid 
 
    displayLoading('none', ''); 
 
    } else { 
 
    displayLoading('', 'none'); 
 
    } 
 
} 
 
var FirstLoading = true; 
 
function RestoreSubmitButton() 
 
{ 
 
    if(FirstLoading) 
 
    { 
 
     FirstLoading = false; 
 
     return; 
 
    } 
 
    document.getElementById("formsubmitbutton").style.display = ""; // to display 
 
    document.getElementById("buttonreplacement").style.display = "none"; // to undisplay 
 
} 
 
// To disable restoring submit button, disable or delete next line. 
 
document.onfocus = RestoreSubmitButton;

<div id="formsubmitbutton"> 
 
<input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()"> 
 
</div> 
 
<div id="buttonreplacement" style="margin-left:30px; display:none;"> 
 
<img src="http://gph.is/1cYmtb9" alt="loading..."> 
 
</div>