单页多表单提交异常：第二个表单发送首个表单数据问题

嘿，我帮你找出了几个导致第二个表单提交第一个表单数据的关键问题，咱们一步步来修复：

1. HTML元素ID重复（核心问题） #

页面里的ID必须是唯一的，但你两个表单里的输入框都用了相同的ID（比如Name、mail、phone、gdpr），浏览器在获取元素时会优先匹配第一个出现的ID，这直接导致第二个表单的验证和数据获取都“拿错”了内容。

修复方法：给第二个表单的所有元素加上唯一ID，同时删掉多余的错误闭合标签：

<!-- 第二个表单修改后的HTML片段 -->
<form id="contactform2" method="post" name="contactform2" onsubmit="return false;">
 <div class="form-group pt-3">
 <label class="sr-only pt-5" for="name">Name</label>
 <input type="text" class="form-control form-control-danger form-control-lg" name="name" id="Name2" placeholder="Name*">
 </div>
 <div class="form-group">
 <label class="sr-only" for="mail">Email</label>
 <input type="email" class="form-control form-control form-control-lg" name="email" id="mail2" placeholder="Email*">
 </div>
 <div class="form-group">
 <label class="sr-only" for="mail">Phone Number</label>
 <input type="phone" class="form-control form-control form-control-lg" name="phone" id="phone2" placeholder="Phone Number">
 </div>
 <div class="row">
 <div class="col-md-12">
 <div class="form-group">
 <!-- 移除多余的</textarea>错误标签 -->
 <input type="checkbox" id="gdpr2" name="gdpr" class="form-control md-textarea">
 <label for="gdpr2" name="gdprlabel">I have read and consent to my data being collected as outlined in the <a href="http://www.hopkinsons.net/privacy-policy" target="_blank" class="disclaimerLink">Disclaimer</a></label>
 </div>
 </div>
 </div>
 <!-- 其余部分保持不变 -->
</form>

2. PHP变量名拼写错误 #

在第二个表单的PHP处理代码里，你解析表单数据后用了$contactform2Data，但实际parse_str的结果是存在$contactformData变量里的，这会导致变量未定义，可能 fallback 到之前的全局数据，从而拿到第一个表单的内容。

修复方法：修正变量名：

<?php if (isset($_POST['contactform2'])) {
 parse_str($_POST['contactform2'], $contactformData);
 // 把$contactform2Data改为$contactformData
 $name = $contactformData['name'];
 $email = $contactformData['email'];
 $phone = $contactformData['phone'];
 $to = 'hello@samuelrhys.com';
 $subject = "test2";
 $message = "test2". "\n" .$name. "\n" .$email. "\n" .$phone;
 $headers = "test2" . "\r\n";
 $result = mail($to, $subject, $message, $headers);
 if ($result) {
 echo "Thanks for contacting us, we'll be in touch soon!";
 } else {
 echo "Uh oh. We couldn't deliver your request at this time.";
 }
 } ?>

3. AJAX提交参数不匹配 #

第二个表单的AJAX请求里，你把序列化数据存在了contactform参数下，但PHP代码判断的是isset($_POST['contactform2'])，这会导致PHP永远不会触发第二个表单的处理逻辑，反而可能走第一个表单的处理分支。

修复方法：修改AJAX的data参数名：

$('#contactform2').validate({
 rules: {
 name: { required: true },
 email: { required: true, email: true },
 gdpr: { required: true }
 },
 errorPlacement: function(){ return false; },
 submitHandler: function(){
 var contactform = $('#contactform2').serialize();
 $.ajax({
 type: "POST",
 url: 'ajax.php',
 // 将参数名从contactform改为contactform2
 data: { contactform2: contactform },
 success: function(data){
 $('#contactform2').hide();
 $('.signupmessage').html('<p id="successmessage">' + data + '</p>');
 },
 error: function(xhr,textStatus,err){
 console.log("readyState: " + xhr.readyState);
 console.log("responseText: "+ xhr.responseText);
 console.log("status: " + xhr.status);
 console.log("text status: " + textStatus);
 console.log("error: " + err);
 }
 });
 }
 });

把这三个问题都修复后，第二个表单就能正确提交自己的数据啦！

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