网页双同代码Contact Form仅第一个可提交问题求助

我仔细看了你的代码和问题描述，核心问题出在重复的ID选择器上——两个表单都用了id="contactForm"，而且表单内的输入框（比如#name、#email）也用了相同的ID，这直接导致JavaScript只绑定了第一个表单的提交事件，获取数据时也只会读取第一个表单的内容，所以第二个表单完全无法正常工作。下面是具体的修复步骤：

1. 解决ID冲突问题 #

HTML页面中ID必须是唯一的，重复的ID会让DOM选择器（比如$("#contactForm")）只匹配第一个元素。我们需要给两个表单和内部元素设置不同的ID，同时用类来统一样式和JS选择逻辑：

修改后的横幅表单示例： #

<form role="form" id="heroContactForm" data-toggle="validator" class="shake contact-form">
  <div class="row">
    <div class="form-group col-sm-6">
      <label for="heroName" class="h4">Name</label>
      <input type="text" class="form-control form-name" id="heroName" placeholder="Enter name" required data-error="NEW ERROR MESSAGE">
      <div class="help-block with-errors"></div>
    </div>
    <div class="form-group col-sm-6">
      <label for="heroEmail" class="h4">Email</label>
      <input type="email" class="form-control form-email" id="heroEmail" placeholder="Enter email" required>
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <div class="form-group">
    <label for="heroSub" class="h4">Subject</label>
    <input type="text" class="form-control form-sub" id="heroSub" placeholder="Enter Subject" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="heroMessage" class="h4">Message</label>
    <textarea class="form-control form-message" id="heroMessage" rows="5" placeholder="Enter your message" required></textarea>
    <div class="help-block with-errors"></div>
  </div>
  <button type="submit" class="btn btn-success btn-lg pull-right ">Submit</button>
  <div class="form-msg h3 text-center hidden"></div>
  <div class="clearfix"></div>
</form>

修改后的底部表单示例： #

<form role="form" id="footerContactForm" data-toggle="validator" class="shake contact-form">
  <div class="row">
    <div class="form-group col-sm-6">
      <label for="footerName" class="h4">Name</label>
      <input type="text" class="form-control form-name" id="footerName" placeholder="Enter name" required>
      <div class="help-block with-errors"></div>
    </div>
    <div class="form-group col-sm-6">
      <label for="footerEmail" class="h4">Email</label>
      <input type="email" class="form-control form-email" id="footerEmail" placeholder="Enter email" required>
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <!-- 注意：你的PHP代码里检查了phone字段，这里补上 -->
  <div class="form-group">
    <label for="footerPhone" class="h4">Phone</label>
    <input type="tel" class="form-control form-phone" id="footerPhone" placeholder="Enter phone number" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="footerSub" class="h4">Subject</label>
    <input type="text" class="form-control form-sub" id="footerSub" placeholder="Enter Subject" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="footerMessage" class="h4">Message</label>
    <textarea class="form-control form-message" id="footerMessage" rows="5" placeholder="Enter your message" required></textarea>
    <div class="help-block with-errors"></div>
  </div>
  <button type="submit" class="btn btn-success btn-lg pull-right ">Submit</button>
  <div class="form-msg h3 text-center hidden"></div>
  <div class="clearfix"></div>
</form>

2. 重构JavaScript代码支持多表单 #

原来的JS只针对#contactForm绑定事件，现在改成用类选择器.contact-form，并且动态获取当前提交的表单内的元素，这样不管有多少个表单都能正常工作：

// 给所有.contact-form绑定提交事件
$(".contact-form").validator().on("submit", function(event) {
  const $currentForm = $(this);
  
  if (event.isDefaultPrevented()) {
    formError($currentForm);
    submitMSG($currentForm, false, "Did you fill in the form properly?");
  } else {
    event.preventDefault();
    submitForm($currentForm);
  }
});

function submitForm($form) {
  // 从当前表单内获取数据，用类选择器避免ID冲突
  const formData = {
    name: $form.find(".form-name").val(),
    email: $form.find(".form-email").val(),
    sub: $form.find(".form-sub").val(),
    message: $form.find(".form-message").val(),
    phone: $form.find(".form-phone").val() || "Not provided" // 兼容没有phone的表单
  };

  $.ajax({
    type: "POST",
    url: "php/form-process.php",
    data: formData,
    success: function(text) {
      text === "success" ? formSuccess($form) : formError($form);
      submitMSG($form, text === "success", text);
    }
  });
}

function formSuccess($form) {
  $form[0].reset();
}

function formError($form) {
  $form.removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', () => {
    $form.removeClass();
  });
}

function submitMSG($form, isSuccess, msg) {
  const $msgBox = $form.find(".form-msg");
  const classes = isSuccess 
    ? "h3 text-center tada animated text-success" 
    : "h3 text-center text-danger";
  
  $msgBox.removeClass().addClass(classes).text(msg);
}

3. 修复PHP代码的字段匹配问题 #

你的PHP代码里强制检查$_POST["phone"]，但原来的第一个表单没有这个字段，这会导致提交失败。修改PHP代码，让phone字段可选，同时补上sub字段的验证：

<?php
$errorMSG = "";

// 验证姓名
if (empty($_POST["name"])) {
  $errorMSG = "Name is required ";
} else {
  $name = $_POST["name"];
}

// 验证邮箱
if (empty($_POST["email"])) {
  $errorMSG .= "Email is required ";
} else {
  $email = $_POST["email"];
}

// 验证主题
if (empty($_POST["sub"])) {
  $errorMSG .= "Subject is required ";
} else {
  $sub = $_POST["sub"];
}

// 验证消息
if (empty($_POST["message"])) {
  $errorMSG .= "Message is required ";
} else {
  $message = $_POST["message"];
}

// 电话字段可选
$phone = !empty($_POST["phone"]) ? $_POST["phone"] : "Not provided";

$EmailFrom = "info@infinitesignalsolution.com";
$EmailTo = "umar.neha06@gmail.com";
$Subject = $sub ?: "Enquiry received from website";

// 构建邮件内容
$Body = "Name: {$name}\n";
$Body .= "Phone: {$phone}\n";
$Body .= "Email: {$email}\n";
$Body .= "Subject: {$sub}\n";
$Body .= "Message: {$message}\n";

// 发送邮件
$success = mail($EmailTo, $Subject, $Body, "From: {$EmailFrom}");

// 返回结果
if ($success && empty($errorMSG)) {
  echo "success";
} else {
  echo empty($errorMSG) ? "Something went wrong :(" : $errorMSG;
}
?>

额外小贴士 #

• 永远不要在页面中使用重复ID，这是HTML的基础规范，会引发各种DOM操作问题
• 用类选择器处理多个相似元素，代码更易维护和扩展
• AJAX传递数据时用对象形式（data: formData）比字符串拼接更安全，避免字符转义错误
• 可以给表单添加loading状态，比如点击提交后禁用按钮并显示加载动画，提升用户体验

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