Javascript 在表单完成之前，防止加载图像出现

我正在建立一个网站，需要客户端点击提交按钮。该网站包括HTML选择菜单和输入字段

然后将这些信息提交到一个php文件，该文件随后将数据传递到MySQL数据库

我添加了一些代码，以便在单击submit按钮时能够加载图像。但目前，用户可以单击submit而不填写表单，此时会显示加载消息以及一条消息，告知用户在缺少的字段中输入数据

我想要的是，加载消息只在表单填写完毕并且数据被传递到PHP文件时出现

为了更好地解释我所说的话，我在下面的JSFIDLE中对其进行了粗略的模拟：

JSFiddle显然抛出了一个POST错误，但是在我的站点上，数据显然是发布的，并且该错误不存在，所以忽略它

HTML:

不要连接提交按钮。而是使用提交事件

不要使用提交作为id或名称

如果需要，请使用按钮的id

---

不要连接提交按钮。而是使用提交事件

不要使用提交作为id或名称

如果需要，请使用按钮的id

---

---

您可以在submit事件上处理加载图像的切换（这可能是您执行AJAX操作的地方）：

在表单字段有效之前，提交事件不会激发。 你必须在其他地方关闭它，外汇。AJAX函数的“成功”和“错误”回调

---

希望有帮助。

您可以在提交事件中处理加载图像的切换（这可能是您进行AJAX操作的地方）：

在表单字段有效之前，提交事件不会激发。 你必须在其他地方关闭它，外汇。AJAX函数的“成功”和“错误”回调

希望能有帮助

<form onsubmit="myButton.disabled = true; return true;">
 <label for='name'>
  Please Enter Your Name:
 </label><br>

<input class="label" type="text" name="name" placeholder="Click/Tap here..." required><br><br>

<label for='urgency'>Urgency</label><br>
<select type="select" name="urgency" select id="urgency" required>
  <option value="" disabled selected hidden>Please specify an urgency...</option>
  <option value="1">1 - Least Urgent</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select><br><br>

<span>
  <button type="submit" name='myButton' value="submit" id="submit">Submit</button>
  <button type="reset" value="Reset">Reset</button><br>
 </span>

<div id="loader" style="display:none;"><br>
    <label>
      Please Wait...
     </label>
  <img src="ajax-loader.gif" alt="Loading" />
</div>
</form>

$('#submit').click(function(e){
$('#loader').toggle();
});

$('#formID').on("submit",function(e){
  var empty = false;
  $("input:required",this).each(function() {
    if (!$.trim($(this).val())) {
      empty=true;
      return false; // leave
    }    
  });
  if (empty)  {
    e.preventDefault(); 
  }
  else {
    $('#loader').toggle();
    $("#myButton").attr("disabled",true);
  }
});

$('form').on('submit',function(){
    $('#loader').toggle();
});