ERROR在表单处理时显示图像

Question

我需要在表格处理时显示图像

以下代码的工作问题当我按下提交图片时显示但如果表单中存在某些错误，表单将不会处理但会显示图片 < / p>

当用户按下提交按钮时，如何显示图像，图像应仅在表格处理时出现

CODE

<input onclick="showImg()" class="btn btn-success" type="submit" name="submit" value="Search"/>
<img alt="" src="ajax-loader.gif" id="progress_img" style="visibility:hidden;">
<script language="javascript" type="text/javascript">
   function showImg()
   {
   if (document.getElementById) {
   (document.getElementById("progress_img")).style.visibility = "visible";
   }
  }
</script> 

Answer 1

我创建了一个小型演示。看看吧。

var progressImg = document.getElementById('progress_img');
var myForm = document.getElementById('myForm');

myForm.onsubmit = onFormSubmit;

function onFormSubmit() {
  var error = false;

  // Check for errors

  if (error) {
    // Show error messages
  } else {
    // Display the image
    progressImg.style.display = 'block';

    // Do your AJAX call
    // and hide the image when AJAX is completed
  }

  // This is to prevent the form from submitting
  return false;
}

#progress_img {
  width: 20px;
  height: 20px;
  display: none;
  background: #aaa;
}

<form id="myForm" action="#">
  <input class="btn btn-success" type="submit" name="submit" value="Search" />
  <img id="progress_img" src="ajax-loader.gif" alt="">
</form>

如果您不清楚，请随时问我。

Answer 2

我不认为我完全不知道你想要做什么，但你可以使用javascript验证你需要的所有东西。 实现您愿意的最佳方式是将按钮类型更改为＆＃34;按钮＆＃34;而不是＆＃34;提交＆＃34;然后在＆＃34; onClick＆＃34; ＆＃34; showImg（）＆＃34;函数，将其替换为验证，然后显示图像，然后使用javascript提交功能。

我知道这很容易

 document.getElementById("myForm").submit();