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

检查所需字段的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 2

您可以创建模块化功能来显示和隐藏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>

Answer 3

您可以使用解决方案https://jsfiddle.net/z7wfj880/2/

＆＃13;

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;

＆＃13;

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

＆＃13;

首先执行{{1>} 必需 trim字段，这样如果任何用户提供空格，它将删除前面和后面的额外空格。端。

input通过所有必需的Loop＆amp;检查空输入。

停止在表单上加载图像如果需要字段提交

3 个答案: