双HTML表单提交触发页面刷新，无法调用指定函数求助

我仔细看了你的代码，发现几个关键错误导致了提交时页面直接刷新、自定义逻辑无法触发的问题，咱们一步步来修复：

核心问题排查 #

• 事件绑定错误：第二个表单的事件绑定写的是"submit1"，但表单提交的标准事件名是"submit"——这个错误直接导致你的处理函数根本不会被触发，浏览器只能执行默认的表单提交行为（刷新页面）。
• 表单字段不匹配：你的第二个表单里的输入框name是name、email、phone，但脚本里却在判断name='name1'、name='email1'这些不存在的字段，校验逻辑全错后直接走了默认提交。
• 重复ID冲突：两个表单里有大量重复的ID（比如id="name"、id="mail-success"），HTML里ID必须是唯一的，这会导致JS选择元素时混乱，无法正确定位到对应表单的元素。
• 选择器语法错误：脚本里的$("response_msg")少了#前缀，应该是$("#response_msg")，否则无法找到对应的提示元素。
• 冗余脚本结构：两个独立的$(document).ready可以合并成一个，代码更简洁，也能避免潜在的加载顺序冲突。

修正后的完整代码 #

表单HTML（修复重复ID） #

<!-- 表单1 -->
<div class="contact-form col-md-6 "> 
  <form id="contact-form" method="post" action="" role="form"> 
    <div class="form-group"> 
      <input type="text" placeholder="Your Name" class="form-control" name="name" id="form1-name" required> 
    </div> 
    <div class="form-group"> 
      <input type="email" placeholder="Your Email" class="form-control" name="email" id="form1-email" required> 
    </div> 
    <div class="form-group"> 
      <input type="text" placeholder="Your Phone Number" class="form-control" name="phone" id="form1-phone" required> 
    </div> 
    <div class="response_msg" id="form1-response"></div> 
    <div id="form1-mail-success" class="success"> Thank you. Welcome in Family. :) </div> 
    <div id="form1-mail-fail" class="error"> Sorry, don't know what happened. Try later :( </div> 
    <div id="cf-submit"> 
      <input type="submit" id="contact-submit" class="btn btn-transparent" value="Register" name="submit"> 
    </div> 
  </form> 
</div>

<!-- 表单2 -->
<div class="contact-form col-md-6 "> 
  <form id="contact-form_message" method="post" action="" role="form"> 
    <div class="form-group"> 
      <input type="text" placeholder="Your Name" class="form-control" name="name" id="form2-name" required> 
    </div> 
    <div class="form-group"> 
      <input type="email" placeholder="Your Email" class="form-control" name="email" id="form2-email" required> 
    </div> 
    <div class="form-group"> 
      <input type="text" placeholder="Your Phone Number" class="form-control" name="phone" id="form2-phone" required> 
    </div>
    <!-- 补充你脚本里提到的message输入框（如果不需要可以删除） -->
    <div class="form-group"> 
      <textarea placeholder="Your Message" class="form-control" name="message" id="form2-message" required></textarea> 
    </div> 
    <div class="response_msg" id="form2-response"></div> 
    <div id="form2-mail-success" class="success"> Thank you. Welcome in Family. :) </div> 
    <div id="form2-mail-fail" class="error"> Sorry, don't know what happened. Try later :( </div> 
    <div id="cf-submit"> 
      <input type="submit" id="contact-submit-2" class="btn btn-transparent" value="Register" name="submit"> 
    </div> 
  </form> 
</div>

修正后的JavaScript代码（合并脚本+修复逻辑） #

$(document).ready(function(){
  // 处理表单1的提交逻辑
  $("#contact-form").on("submit",function(e){
    e.preventDefault();
    var $form = $(this);
    var hasError = false;
    
    // 表单1字段校验
    if ($form.find("[name='name']").val() === '') {
      $form.find("[name='name']").css("border","1px solid red");
      hasError = true;
    } else {
      $form.find("[name='name']").css("border","1px solid #eeeeee");
    }
    if ($form.find("[name='email']").val() === '') {
      $form.find("[name='email']").css("border","1px solid red");
      hasError = true;
    } else {
      $form.find("[name='email']").css("border","1px solid #eeeeee");
    }
    if ($form.find("[name='phone']").val() === '') {
      $form.find("[name='phone']").css("border","1px solid red");
      hasError = true;
    } else {
      $form.find("[name='phone']").css("border","1px solid #eeeeee");
    }
    
    if (!hasError) {
      $("#loading-img").css("display","block");
      var sendData = $form.serialize();
      $.ajax({
        type: "POST",
        url: "js/ajaxsubmit.php",
        data: sendData,
        success: function(data) {
          $("#loading-img").css("display","none");
          $("#form1-response").text(data).slideDown().fadeOut(3000);
          $form.find("input[type=text], input[type=email]").val("");
        }
      });
    }
    return false;
  });

  // 处理表单2的提交逻辑
  $("#contact-form_message").on("submit", function (e) {
    e.preventDefault();
    var $form = $(this);
    var hasError = false;
    
    // 表单2字段校验（包含补充的message）
    if ($form.find("[name='name']").val() === '') {
      $form.find("[name='name']").css("border","1px solid red");
      hasError = true;
    } else {
      $form.find("[name='name']").css("border","1px solid #eeeeee");
    }
    if ($form.find("[name='email']").val() === '') {
      $form.find("[name='email']").css("border","1px solid red");
      hasError = true;
    } else {
      $form.find("[name='email']").css("border","1px solid #eeeeee");
    }
    if ($form.find("[name='phone']").val() === '') {
      $form.find("[name='phone']").css("border","1px solid red");
      hasError = true;
    } else {
      $form.find("[name='phone']").css("border","1px solid #eeeeee");
    }
    if ($form.find("[name='message']").val() === '') {
      $form.find("[name='message']").css("border","1px solid red");
      hasError = true;
    } else {
      $form.find("[name='message']").css("border","1px solid #eeeeee");
    }
    
    if (!hasError) {
      $("#loading-img").css("display", "block");
      var sendData = $form.serialize();
      $.ajax({
        type: "POST",
        url: "js/contact.php",
        data: sendData,
        success: function (data) {
          $("#loading-img").css("display","none");
          $("#form2-response").text(data).slideDown().fadeOut(3000);
          $form.find("input[type=text], input[type=email], textarea").val("");
        }
      });
    }
    return false;
  });

  // 通用的输入框失焦样式恢复（两个表单都适用）
  $(".contact-form input, .contact-form textarea").blur(function(){
    var checkValue = $(this).val();
    if(checkValue != '') {
      $(this).css("border","1px solid #eeeeee");
    }
  });
});

关键修正说明 #

1. 修复事件绑定：把第二个表单的"submit1"改成标准的"submit"，确保提交时触发自定义逻辑。
2. 唯一ID处理：给两个表单的所有元素加上form1-、form2-前缀，避免ID冲突，保证JS能精准定位元素。
3. 字段匹配修复：让脚本里的字段校验和实际表单的name属性保持一致，避免无意义的错误判断。
4. 选择器修正：把错误的$("response_msg")改成带#的ID选择器，分别对应两个表单的提示元素。
5. 代码优化：合并了两个$(document).ready，用$form缓存当前表单对象减少重复DOM查询，同时把失焦事件改成通用选择器，减少冗余代码。

内容的提问来源于stack exchange，提问作者Ritu