Sunday 15 September 2013

Pass checkbox values to PHP using AJAX & jQuery -



Pass checkbox values to PHP using AJAX & jQuery -

i'm trying contact form work bootstrap alerts (for success), validation, ajax, , php. issue sending checkbox values php. email not submit sits. if comment out jquery, ajax, , php in regards checkboxes, submits , receive email. please assist in getting checkbox values pass through using ajax , php. i've updated both php , ajax sections regarding checkboxes.

thanks

my form markup:

<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 take @ to the lowest degree 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>

my jquery:

/* jquery validation using jqbootstrapvalidation illustration taken jqbootstrapvalidation docs */ $(function() { $("input,textarea").jqbootstrapvalidation( { preventsubmit: true, submiterror: function($form, event, errors) { // have when submit produces error ? // not decided if need yet }, submitsuccess: function($form, event) { event.preventdefault(); // prevent default submit behaviour // values 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 value of checkbox. }); var budget = $("select#budget").val(); var timeframe = $("select#timeframe").val(); var message = $("textarea#message").val(); var firstname = name; // success/failure message // check white space in name 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'>&times;") .append( "</button>"); $('#success > .alert-success') .append("<strong>awesome! involvement in nova development. in touch soon. </strong>"); $('#success > .alert-success') .append('</div>'); //clear 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'>&times;") .append( "</button>"); $('#success > .alert-danger').append("<strong>sorry "+firstname+" seems mail service server not responding...</strong> please email me straight <a href='info@novawebdev.com?subject=message_me crownco.net'>info@novawebdev.com</a> ? sorry inconvenience!"); $('#success > .alert-danger').append('</div>'); //clear fields $('#contactform').trigger("reset"); }, }) }, filter: function() { homecoming $(this).is(":visible"); }, }); $("a[data-toggle=\"tab\"]").click(function(e) { e.preventdefault(); $(this).tab("show"); }); }); /*when clicking on total hide fail/success boxes */ $('#name').focus(function() { $('#success').html(''); });

my php:

<?php // check if fields passed 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!"; homecoming 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 , send $to = 'info@novawebdev.com'; // set email $email_subject = "contact form submitted by: $name"; $email_body = "you have received new message. \n\n". " here 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); homecoming true; ?>

i have had similar, except check boxes had unique id's. have check whether each 1 checked or not, , set value (i used 1 checked , 0 not checked) variable. here code it:

guides.prototype.list = ['amold','folold','tichold','bookold','nebold','sterold','byteold','ingold']; guides.prototype.update = function(){ for( var = 0 ; < this.list.length ; i++ ){ var guide = this.list[i]; this[ guide + 'guide' ] = $("#" + guide ).is(":checked") ? 1 : 0; } } var guides = new guides();

guides can want, services in case. in prototype list set id's each check box. lastly line of function might like

this[service] = $("#"+service ).is(":checked") ?1 : 0;

and service variable each id in list. can pass them in jquery individual items (q12_1:q12_1 illustration is how set them in list). in php file utilize if statements or other code wish see ones have values , them process them wish.

php jquery ajax twitter-bootstrap

No comments:

Post a Comment