[:en]Its hard to pass multiple checkbox data to a php via a jquery file, we wandered arround the internet to found a simple and effective solution, and we had to develop one of our own based on different solutions founded by others obviously (that’s how the internet works isn’t it ?).
We didn’t want to use the jquery serialize api, to be passing multiple checkbox data array with jquery and php no important reason, so we had to figure aout a better and working way to pass multiple checkbox data to a mail php…
We came across wit four tutorials on how to pass checkbox data via jquery
- Getting Checkbox Values in jQuery
- How to pass multiple checkboxes using jQuery ajax post
- Passing array of checkbox values to php through jQuery (example)
- Send multiple checkbox data to PHP via jQuery ajax()
Using the lessons learned in this 4 tutorials we came arround wih our own working solution (improves and critics welcome)
Passing multiple checkbox data array with jquery and php
First our form (HTML)
<div class="checkbox"><label><input type="checkbox" class="cb" name="services[]" value="Living Dusting">Dusting</label></div> <div class="checkbox"><label><input type="checkbox" class="cb" name="services[]" value="Living Mirrors">Mirrors</label></div> <div class="checkbox"><label><input type="checkbox" class="cb" name="services[]" value="Living Floors">Floors</label></div> <div class="checkbox"><label><input type="checkbox" class="cb" name="services[]" value="Living trash">Trash/Recycling</label></div>
Then our data manager (JQUERY)
$(function() {
$("input,textarea,array").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
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 message = $("textarea#message").val();
var services = $("textarea#message").val();
var data = { 'services[]' : []};
$("input:checked").each(function() {
data['services[]'].push($(this).val());
});
var cb = [];
$.each($('.cb:checked'), function() {
cb.push($(this).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: "././mail/contact_me.php",
type: "POST",
data: {
name: name,
phone: phone,
email: email,
message: message,
data: data,
cb:cb
//services: services
},
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>Your message has been sent. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#contactForm').trigger("reset")
//close services panel
$('#collapseExample').collapse('hide');
},
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. Please try again later!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset")
//close services panel
$('#collapseExample').collapse('hide');
},
})
},
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('');
});
Finaly Our mail sender (PHP)
<?php
// Check for empty fields
if(empty($_POST['name']) ||
empty($_POST['email']) ||
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 = implode(' | ',$_POST['cb']);
// Create the email and send the message
$to = 'yourname@yourdomain.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = "TailorMade Contact Form: $name";
$email_body = "<h1>You have received a new message from Tailor Made website contact form.</h1>\n"."Here are the details:\n\nName:$name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message\n\n Services Required: \n $services "; // Loop to store and display values of individual checked checkbox.
$headers = "From: $email_address\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
We are obsesive when it comes down to solve any issue in our website development, los angeles web design is very competititve and we won’t be behind #1.
We were not be stopped by a simple isssue on passing multiple checkbox data array with jquery and php. We hope this example is usefull for you as it was for ourselves when we designed this cleaning services website, a small business website in Los Angeles.
