javascript - 处理表单时显示图像时出错

Question

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

下面的代码可以工作问题是当我按提交时显示图像，但如果提交的表单中有一些错误，则表单将不会处理但会显示图像

如何在用户按下提交按钮时显示图像，图像仅在表单处理时显示

代码

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

如果您有任何不清楚的地方，请随时问我。