Question

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

然后将此信息提交给php文件，然后将该数据传递到MySQL数据库。

我已添加一些代码，以便在单击提交按钮时启用加载图像。但是目前，用户可以单击提交而不填写表单，并显示加载消息以及告知用户将数据输入到缺失字段的消息。

我想要的是，只有在填写表单并且数据传递给PHP文件时才会出现加载消息。

我在下面的JSFiddle中粗暴地嘲笑这个，以便更好地解释我所说的话：

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

HTML：

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

JQuery：

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

Answer 1

请勿连接提交按钮。而是使用提交事件
不要使用提交作为ID或名称
如果需要，使用按钮的ID

$('#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);
  }
});

Answer 2

您可以处理在提交事件上加载图片的切换（这可能是您执行AJAX的时间）：

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

在表单字段有效之前，提交事件不会触发。你必须切换它＆＃34;关闭＆＃34;其他地方，fx。＆＃34;成功＆＃34;和＆＃34;错误＆＃34;回调AJAX函数。

希望它有所帮助。

防止加载图像出现，直到表单完成

2 个答案: