我正试图让这个联系表单与引导程序警报（为了成功）、验证、ajax和php一起工作。我的问题是将复选框值发送到php。电子邮件不会按原样提交。如果我注释掉关于复选框的jquery、ajax和php，它就会提交，我就会收到电子邮件。请使用ajax和php帮助获取要传递的复选框值。我已经更新了关于复选框的php和ajax部分。
感谢
我的表单标记：
<div class="control-group">
<div class="controls">
<div class="checkbox">
<label>
<input type="checkbox" name="services[]" data-validation-minchecked-minchecked="1"
data-validation-minchecked-message="Please choose at least one"id="q12_1" value="Website Design or Redesign"> Website Design or Redesign
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="services[]" id="q12_2" value="eCommerce / Online Store"> eCommerce / Online Store
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"name="services[]" id="q12_3" value="Web Application Development"> Web Application Development
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"name="services[]" id="q12_4" value="Website Maintenance / Hosting"> Website Maintenance / Hosting
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"name="services[]" id="q12_5" value="Branding Services / Graphic Design"> Branding Services / Graphic Design
</label>
</div>
</div>
</div>
我的jQuery:
/*
Jquery Validation using jqBootstrapValidation
example is taken from jqBootstrapValidation docs
*/
$(function() {
$("input,textarea").jqBootstrapValidation(
{
preventSubmit: true,
submitError: function($form, event, errors) {
// something to have when submit produces an error ?
// Not decided if I need it yet
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var services = array();
$('checkbox :checked').each(function(index,element) {
services.push($(this).val()); //This contains the value of your checkbox.
});
var budget = $("select#budget").val();
var timeframe = $("select#timeframe").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "assets/contact_me.php",
type: "POST",
data: {name: name, phone: phone, email: email, services: services, budget: budget, timeframe: timeframe, message: message},
cache: false,
success: function() {
// Success message
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append( "</button>");
$('#success > .alert-success')
.append("<strong>Awesome! Thanks for your interest in Nova Development. Will be in touch soon. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append( "</button>");
$('#success > .alert-danger').append("<strong>Sorry "+firstName+" it seems that my mail server is not responding...</strong> Could you please email me directly to <a href='info@novawebdev.com?Subject=Message_Me from Crownco.net'>info@novawebdev.com</a> ? Sorry for the inconvenience!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
})
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle='"tab'"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('#success').html('');
});
我的PHP:
<?php
// check if fields passed are empty
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['phone']) ||
empty($_POST['services[]']) ||
empty($_POST['budget']) ||
empty($_POST['timeframe']) ||
empty($_POST['message']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$services = $_POST['services[]'];
$budget = $_POST['budget'];
$timeframe = $_POST['timeframe'];
// create email body and send it
$to = 'info@novawebdev.com'; // put your email
$email_subject = "Contact form submitted by: $name";
$email_body = "You have received a new message. 'n'n".
" Here are the details:'n 'nName: $name 'nPhone: $phone 'nServices: $services 'nBudget: $budget 'nTimeframe: $timeframe 'n".
"Email: $email_address'nMessage: 'n'n$message";
$headers = "From: $email_address'n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
我不得不做一些类似的事情，只是我的复选框都有唯一的id。基本上，您必须检查每一个是否已检查，并将该值（我使用1表示已检查，0表示未检查）放入变量中。这是我的代码：
Guides.prototype.list = ['amOld','folOld','tichOld','bookOld','nebOld','sterOld','byteOld','ingOld'];
Guides.prototype.update = function(){
for( var i = 0 ; i < this.list.length ; i++ ){
var guide = this.list[i];
this[ guide + 'Guide' ] = $("#" + guide ).is(":checked") ? 1 : 0;
}
}
var guides = new Guides();
导游可以是你想要的任何东西，服务对你来说都很好。在原型列表中，您可以将每个复选框的id放在其中。你的最后一行功能可能看起来像
this[service] = $("#"+service ).is(":checked") ?1 : 0;
服务将是列表中每个id的变量。现在，您可以将它们作为单独的项目在jquery中传递（例如，q12_1:q12_1就是您将它们放入列表的方式）。现在，在您的php文件中使用if语句或任何其他代码，您希望查看哪些语句具有值，并根据需要进行处理。
我确实看到您的jQuery和复选框有问题。
你得到了：
$('checkbox#services')
这会选中带有#services-id的复选框，而您没有该复选框。您必须选取每个复选框的值。您可以使用它们各自的id q12_x来执行此操作，也可以迭代所有值。
$('checkbox :checked').each(function(index,element) {
$(this).val(); //This contains the value of your checkbox.
});
从那时起，如果你愿意，你可以把它推成一个数组。
var services = array();
$('checkbox :checked').each(function(index,element) {
services.push($(this).val()); //This contains the value of your checkbox.
});
编辑
添加了：checked，所以它只会从选中的复选框中获取值。