jQuery双表单提交时加载状态差异化实现问题排查求助

Let's walk through your code issues and fix them step by step to get your form submission states working correctly.

🔍 代码中存在的问题 #

• 选择器错误：你用$("email")和$("sample_data")来选中表单，但这不是有效的jQuery选择器。要通过name属性定位表单，应该用$("form[name='email']")和$("form[name='sample_data']")。
• 事件绑定不匹配：你的代码绑定了表单的submit事件，但HTML里的按钮是type="button"，这类按钮不会触发表单的submit事件。要么把按钮改成type="submit"，要么绑定按钮的click事件。
• 加载图标处理逻辑缺失：第二个表单的按钮处理代码里$(this).find('input[type=submit]').prop()是空调用，而且input的value属性无法直接显示图片，需要用「隐藏按钮 + 显示加载图标」或者替换按钮内容的方式实现。
• 加载图标默认显示：你的加载图标div默认处于显示状态，应该初始隐藏，只有提交时才触发显示。

✅ 修改后的完整代码 #

HTML 代码 #

<form name="email" action="#" method="post"> 
  <label for="email">Your Email</label> 
  <input name="Email" id="email" type="email" required> 
  <input type="submit" value="Submit"> 
</form><br /><br /> 
<h2> Testing Form </h2> 
<form name="sample_data"> 
  <label for="fname">First Name</label> 
  <input name="fname" id="fname_id" type="text" required><br /> 
  <label for="lname">Last Name</label> 
  <input name="lname" id="lname_id" type="text" required> 
  <input type="submit" value="Submit"> 
</form> 
<!-- 初始隐藏加载图标 -->
<div class="loadingio-spinner-spinner-cm0pdtzvpde" style="display:none;"> 
  <div class="ldio-rfcqdr7w4x"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
  </div> 
</div>

JavaScript 代码 #

$(document).ready(function() {
  // 第一个表单：提交时修改按钮文本
  $("form[name='email']").submit(function(e) {
    e.preventDefault(); // 阻止默认表单提交，可根据实际业务需求调整
    var form = $(this);
    var submitBtn = form.find('input[type=submit]');
    
    if (form.validate().checkForm()) {
      submitBtn.prop('disabled', true).val('Please wait...');
      // 这里可添加实际的表单提交逻辑（比如AJAX请求）
    }
  });

  // 第二个表单：提交时显示加载图标，隐藏按钮
  $("form[name='sample_data']").submit(function(e) {
    e.preventDefault(); // 阻止默认表单提交，可根据实际业务需求调整
    var form = $(this);
    var submitBtn = form.find('input[type=submit]');
    var loadingIcon = $('.loadingio-spinner-spinner-cm0pdtzvpde');
    
    if (form.validate().checkForm()) {
      submitBtn.prop('disabled', true).hide(); // 禁用并隐藏提交按钮
      loadingIcon.show(); // 显示加载图标
      // 这里可添加实际的表单提交逻辑（比如AJAX请求）
      // 请求完成后记得恢复状态：submitBtn.prop('disabled', false).show(); loadingIcon.hide();
    }
  });
});

📝 关键修改说明 #

1. 修正选择器：用form[name='xxx']准确选中目标表单，避免选择器无效的问题。
2. 按钮类型调整：把按钮改成type="submit"，既能触发表单的submit事件，也符合表单的标准用法。
3. 加载图标控制：初始通过style="display:none;"隐藏加载图标，提交第二个表单时，隐藏按钮并显示图标；如果是AJAX提交，请求完成后要记得恢复按钮状态并隐藏图标。
4. 表单验证优化：直接用当前表单的validate()方法，不用重复选中其他表单，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Mr.M