我有以下表格：
<form id="frmEnquiry" action="" method="post" enctype='multipart/form-data'>
<div id="mail-status"></div>
<div class="w-row">
<div class="w-col w-col-3 w-col-stack form-padding-left no-left-padding ">
<div class="form-label">Name:</div>
<input
type="text" name="userName" id="userName"
class="demoInputBox width" placeholder="Name">
</div>
<div class=" w-col w-col-3 w-col-stack no-left-padding">
<div class="form-label">Phone Number:</div>
<input
type="text" name="phone" id="phone"
class="demoInputBox width" placeholder="phone">
</div>
<div class=" w-col w-col-3 w-col-stack no-left-padding">
<div class="form-label">E-Mail:</div>
<input
type="text" name="userEmail" id="userEmail"
class="demoInputBox width" placeholder="Email">
</div>
<div class=" w-col w-col-3 w-col-stack no-left-padding">
<div class="form-label">ZIP / City of job site:</div>
<input
type="text" name="zip" id="zip"
class="demoInputBox width" placeholder="zip">
</div>
</div>
<div class="w-row">
<div class="w-col w-col-3 w-col-stack form-padding-left no-left-padding">
<div class="form-label ">Date you would like to set up for: </div>
<input class="demoInputBox width" name="Date" id="Date" type="date">
</div>
<div class="w-col w-col-3 w-col-stack no-left-padding">
<div class="form-label">Preferred Appointment Time:</div>
<input class="demoInputBox width" name="Time" id="Time" type="time">
</div>
<div class="w-col w-col-3 w-col-stack no-left-padding"></div>
<div class="w-col w-col-3 w-col-stack no-left-padding"></div>
</div>
<div class="gray-line"></div>
<div class="form-label ">Surface type:</div>
<div class="form-options">
<div class="form-right-margin w-checkbox">
<input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Tub" type="checkbox">
<label for="Tub" class="w-form-label">Tub</label>
</div>
<div class="form-right-margin w-checkbox">
<input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Tile" type="checkbox">
<label for="Tile" class="w-form-label">Tile</label>
</div>
<div class="form-right-margin w-checkbox">
<input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Sink" type="checkbox">
<label for="Sink" class="w-form-label">Sink</label>
</div>
<div class="form-right-margin w-checkbox">
<input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Claw_Foot" type="checkbox">
<label for="Claw Foot" class="w-form-label">Claw Foot</label>
</div>
<div class="form-right-margin w-checkbox">
<input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Counter_Top" type="checkbox">
<label for="Counter Top" class="w-form-label">Counter Top</label>
</div>
<div class="form-right-margin w-checkbox">
<input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Jacuzzi" type="checkbox">
<label for="Jacuzzi" class="w-form-label">Jacuzzi</label>
</div>
<div class="form-right-margin w-checkbox">
<input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Regrout" type="checkbox">
<label for="Regrout" class="w-form-label">Regrout</label>
</div>
<div class="form-right-margin w-checkbox">
<input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Caulking" type="checkbox">
<label for="Caulking" class="w-form-label" >Caulking</label>
</div>
<div class="w-checkbox">
<input id="SurfaceType" name="SurfaceType[]" class="demoInputBox" value="Other" type="checkbox">
<label for="Other" class="w-form-label">Other</label>
</div>
</div>
<div class="gray-line"></div>
<div class="form-options">
<div class="form-right-margin-2">
<div class="form-label">Has the tub / surface been reglazed before? :</div>
<div class="form-options">
<div class="form-right-margin w-radio">
<input id="ReglazedBefore" name="ReglazedBefore" value="Yes" class="demoInputBox" type="radio">
<label for="Yes" class="w-form-label">Yes</label>
</div>
<div class="form-right-margin w-radio">
<input id="ReglazedBefore" name="ReglazedBefore" value="No" class="demoInputBox" type="radio">
<label for="No" class="w-form-label" >No</label>
</div>
<div class="w-radio">
<input id="ReglazedBefore" name="ReglazedBefore" value="Unknown" class="demoInputBox" type="radio">
<label for="Unknown" class="w-form-label" >Unknown</label>
</div>
</div>
</div>
<div>
<div class="form-label"> Is the tub covered with:</div>
<div class="form-options">
<div class="form-right-margin w-radio">
<input id="TubCovered" name="TubCovered" value="Curtains" class="demoInputBox" type="radio">
<label for="Curtains" class="w-form-label">Curtains</label>
</div>
<div class="form-right-margin w-radio">
<input id="TubCovered" name="TubCovered" value="Glass Door" class="demoInputBox" type="radio">
<label for="Glass Door" class="w-form-label" >Glass door</label>
</div>
<div class="w-radio">
<input id="TubCovered" name="TubCovered" value="Unknown" class="demoInputBox" type="radio">
<label for="Unknown" class="w-form-label">Unknown</label>
</div>
</div>
</div>
</div>
<div class="gray-line"></div>
<div class="form-options">
<div class="form-right-margin-3">
<div class="form-label">Do you need to recaulk your bath tub?</div>
<div class="form-options">
<div class="form-right-margin w-radio">
<input id="Recaulk" name="Recaulk" value="Yes" class="demoInputBox" type="radio">
<label for="Yes" class="w-form-label">Yes</label>
</div>
<div class="form-right-margin w-radio">
<input id="Recaulk" name="Recaulk" value="No" class="demoInputBox" type="radio">
<label for="No" class="w-form-label">No</label>
</div>
</div>
<p>Please note: tub recaulking is 75$ extra</p>
</div>
<div class="form-right-margin-3">
<div class="form-label"> Do you need non skid treatment for your tub?</div>
<div class="form-options">
<div class=" form-right-margin w-radio">
<input id="NonSkid" name="NonSkid" value="Yes" class="demoInputBox" type="radio">
<label for="Yes" class="w-form-label">Yes</label>
</div>
<div class="form-right-margin w-radio">
<input id="NonSkid" name="NonSkid" value="No" class="demoInputBox" type="radio">
<label for="No" class="w-form-label">No</label>
</div>
</div>
<p>Please note: non skid treatment is 75$ extra</p>
</div>
<div>
<div class="form-label"> Does your building has elevator?</div>
<div class="form-options">
<div class=" form-right-margin w-radio">
<input id="Elevator" name="Elevator" value="Yes" class="demoInputBox" type="radio">
<label for="Yes" class="w-form-label">Yes</label>
</div>
<div class="form-right-margin w-radio">
<input id="Elevator" name="Elevator" value="No" class="demoInputBox" type="radio">
<label for="No" class="w-form-label">No</label>
</div>
<div class="w-radio">
<input id="Elevator" name="Elevator" value="Unknown" class="demoInputBox" type="radio">
<label for="Unknown" class="w-form-label">Unknown</label>
</div>
</div>
</div>
</div>
<div class="gray-line"></div>
<div class="form-label ">Additional Comments:</div>
<div>
<textarea name="comments" id="comments" class="demoInputBox width"
cols="60" rows="4" placeholder="Comments"></textarea>
</div>
<div>
<input type="submit" value="Submit To Book Appointment " class="submit-button btnAction" />
</div>
</form>
表单按预期通过Ajax提交，但我没有收到任何收音机和复选框值。我想要实现的目标如下：
我试图通过以下方式实现这一目标：
$(document).ready(function (e){
$("#frmEnquiry").on('submit',(function(e){
e.preventDefault();
$('#loader-icon').show();
var valid;
valid = validateContact();
if(valid) {
$.ajax({
url: "book-appointmentCopy.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#mail-status").html(data);
$('#loader-icon').hide();
},
error: function(){}
});
}
}));
function validateContact() {
var valid = true;
$(".demoInputBox").css('background-color','');
$(".info").html('');
$("#userName").removeClass("invalid");
$("#userEmail").removeClass("invalid");
$("#phone").removeClass("invalid");
$("#zip").removeClass("invalid");
$("#Date").removeClass("invalid");
$("#Time").removeClass("invalid");
$("#SurfaceType").removeClass("invalid");
$("#ReglazedBefore").removeClass("invalid");
$("#TubCovered").removeClass("invalid");
$("#Recaulk").removeClass("invalid");
$("#NonSkid").removeClass("invalid");
$("#Elevator").removeClass("invalid");
$("#comments").removeClass("invalid");
if(!$("#userName").val()) {
$("#userName").addClass("invalid");
$("#userName").attr("title","Required");
valid = false;
}
if(!$("#phone").val()) {
$("#phone").addClass("invalid");
$("#phone").attr("title","Required");
valid = false;
}
if(!$("#userEmail").val()) {
$("#userEmail").addClass("invalid");
$("#userEmail").attr("title","Required");
valid = false;
}
if(!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
$("#userEmail").addClass("invalid");
$("#userEmail").attr("title","Invalid Email");
valid = false;
}
if(!$("#zip").val()) {
$("#zip").addClass("invalid");
$("#zip").attr("title","Required");
valid = false;
}
if(!$("#Date").val()) {
$("#Date").addClass("invalid");
$("#Date").attr("title","Required");
valid = false;
}
if(!$("#Time").val()) {
$("#Time").addClass("invalid");
$("#Time").attr("title","Required");
valid = false;
}
if(!$("#SurfaceType").val()) {
$("#SurfaceType").addClass("invalid");
$("#SurfaceType").attr("title","Required");
valid = false;
}
if(!$("#ReglazedBefore").val()) {
$("#ReglazedBefore").addClass("invalid");
$("#ReglazedBefore").attr("title","Required");
valid = false;
}
if(!$("#TubCovered").val()) {
$("#TubCovered").addClass("invalid");
$("#TubCovered").attr("title","Required");
valid = false;
}
if(!$("#Recaulk").val()) {
$("#Recaulk").addClass("invalid");
$("#Recaulk").attr("title","Required");
valid = false;
}
if(!$("#NonSkid").val()) {
$("#NonSkid").addClass("invalid");
$("#NonSkid").attr("title","Required");
valid = false;
}
if(!$("#Elevator").val()) {
$("#Elevator").addClass("invalid");
$("#Elevator").attr("title","Required");
valid = false;
}
if(!$("#comments").val()) {
$("#comments").addClass("invalid");
$("#comments").attr("title","Required");
valid = false;
}
return valid;
}
});
不幸的是，这似乎不适用于单选按钮和复选框。我做错什么了吗？这是我处理表单的PHP脚本：
<?php
$message=
'Name: '.$_POST['userName'].'<br /><br />
Phone Number: '.$_POST['phone'].'<br /><br />
E-Mail: '.$_POST['userEmail'].'<br /><br />
ZIP / City of job site: '.$_POST['zip'].'<br /><br />
Date: '.$_POST['Date'].'<br /><br />
Time: '.$_POST['Time'].'<br /><br />
Surface type: '.($_POST['SurfaceType']).'<br /><br />
Has the tub / surface been reglazed before?: '.$_POST['ReglazedBefore'].'<br /><br />
Is the tub covered with: '.$_POST['TubCovered'].'<br /><br />
Do you need to recaulk your bath tub?: '.$_POST['Recaulk'].'<br /><br />
Do you need non skid treatment for your tub?: '.$_POST['NonSkid'].'<br /><br />
Does your building has elevator?: '.$_POST['Elevator'].'<br /><br />
Additional Comments: '.$_POST['comments'].'
';
require('phpmailer/class.phpmailer.php');
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPDebug = 0;
$mail->SMTPAuth = TRUE;
$mail->SMTPSecure = "ssl";
$mail->Port = 465;
$mail->Username = "mymail@gmail.com";
$mail->Password = "mypass";
$mail->Host = "smtp.gmail.com";
$mail->Mailer = "smtp";
$mail->SetFrom($_POST["userEmail"], $_POST["userName"]);
$mail->AddReplyTo($_POST["userEmail"], $_POST["userName"]);
$mail->AddAddress("myemailaddress"); // Where to send it - Recipient
$mail->Subject = " Form - https://www..com/"; // Subject (which isn't required)
$mail->WordWrap = 80;
$mail->MsgHTML($message);
foreach ($_FILES["attachment"]["name"] as $k => $v) {
$mail->AddAttachment( $_FILES["attachment"]["tmp_name"][$k], $_FILES["attachment"]["name"][$k] );
}
$mail->IsHTML(true);
if(!$mail->Send()) {
echo "<meta http-equiv=\"refresh\" content=\"0;URL=error.html\">";
} else {
echo "<meta http-equiv=\"refresh\" content=\"0;URL=contact-thanks.html\">";
}
?>
答案 0 :(得分：1)
使用jQuery，你可以做类似的事情。
if ($('input[name="SurfaceType[]"]:checked').length == 0){
$("#SurfaceType").addClass("invalid").attr("title","Required");
valid = false;
}
在你的php中你可以做类似
的事情Surface type: '.implode(',' , $_POST['SurfaceType']).'<br /><br />
你不应该在页面中的元素中重复id
答案 1 :(得分：1)
好的。首先让我们解决您的第一个问题：从我的PHP脚本中返回的单选按钮和复选框中获取值。
您没有获得PHP脚本中返回的值的原因是因为这些POST变量代表Array而不是普通字符串。因此，您需要使用$_POST['SurfaceType']，而不是使用$_POST['SurfaceType'][0]来获取值。或者，为简单起见，您可以使用Implode()将数组元素连接到普通字符串中，如下所示：
$SurfaceType = implode(',' , $_POST['SurfaceType']);
现在$SurfaceType将包含该值，您可以在$message中使用它，就像使用所有其他变量一样。
现在让我们继续讨论第二个问题：通过jQuery强制要求单选按钮和复选框
您尝试过使用：
if(!$("#SurfaceType").val()) {
$("#SurfaceType").addClass("invalid");
$("#SurfaceType").attr("title","Required");
valid = false;
}
但这不适用于单选按钮或复选框。这是因为你实际上需要验证它们是否已经检查而不是它们是否有值。所以相反（相信Shaun Forsyth这个）你应该使用：
if ($('input[name="SurfaceType[]"]:checked').length == 0){
$("#SurfaceType").addClass("invalid").attr("title","Required");
valid = false;
}
最后，我想补充一点，您可能希望将<br />内的所有$message元素替换为\n。当您发送电子邮件时，使用\ n创建新行。
今晚一直都是你的旅程，你必须表现出很大的耐心，但我希望你已经学到了一些东西，并成为Stack Overflow上众多杰出成员之一！