php - AJAX form working in Chrome but not IE of FF -
hi need help...
first of know little of jquery / javascript, learnt basic css month after having website professionally built, basic html, few days ago thought try luck jquery total novis if answer please keep in mind know nothing these things - thanks!
i have been trying make new contact form, have used bits of code on net (so know code messy) anyway resulting form seems work fine in chrome in ie or ff or safari on submit returns 'sorry, there has been problem form' alert , nothing happens, guess php script returning '1' make happen, honest in on head!
below jquery....
$(function(){ //original field values var field_values = { //id : value 'firstname' : 'first name', 'lastname' : 'last name', 'email' : 'email address', 'phone' : 'phone number', }; //inputfocus $('input#lastname').inputfocus({ value: field_values['lastname'] }); $('input#firstname').inputfocus({ value: field_values['firstname'] }); $('input#email').inputfocus({ value: field_values['email'] }); $('input#phone').inputfocus({ value: field_values['phone'] }); //reset progress bar $('#progress').css('width','0'); $('#progress_text').html('0% complete'); //second_step $('form').submit(function(){ return false; }); $('#submit_second').click(function(){ //remove classes $('#second_step input').removeclass('error').removeclass('valid'); var emailpattern = /^[a-za-z0-9._-]+@[a-za-z0-9.-]+\.[a-za-z]{2,4}$/; var fields = $('#second_step input[type=text]'); var error = 0; fields.each(function(){ var value = $(this).val(); if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailpattern.test(value) ) ) { $(this).addclass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addclass('valid'); } }); if(!error) { //update progress bar $('#progress_text').html('66% complete'); $('#progress').css('width','226px'); //slide steps $('#second_step').slideup(); $('#third_step').slidedown(); } else return false; }); $('#submit_third').click(function(){ //update progress bar $('#progress_text').html('100% complete'); $('#progress').css('width','339px'); //prepare fourth step var fields = new array( $('#firstname').val() + ' ' + $('#lastname').val(), $('#email').val(), $('#phone').val(), $('#service').val(), $('#location').val(), $('#mirror').val(), $('#from').val() ); var tr = $('#fourth_step tr'); tr.each(function(){ //alert( fields[$(this).index()] ) $(this).children('td:nth-child(2)').html(fields[$(this).index()]); }); //slide steps $('#third_step').slideup(); $('#fourth_step').slidedown(); }); $('#submit_fourth').click(function(){ //get data fields var firstname = $('input[name=firstname]'); var email = $('input[name=email]'); var lastname = $('input[name=lastname]'); var phone = $('input[name=phone]'); //organize data var data = 'firstname=' + firstname.val() + '&email=' + email.val() + '&lastname=' + lastname.val() + '&phone=' + phone.val() + '&service=' + $('select#service option:selected').val() + '&location=' + $('select#location option:selected').val() + '&mirror=' + $('select#mirror option:selected').val() + '&leadfrom=' + $('select#from option:selected').val(); //start ajax $.ajax({ //this php file processes data , send mail url: "process.php", //get method used type: "get", //pass data data: data, //do not cache page cache: false, //success success: function (html) { //if process.php returned 1/true (send mail success) if (html==1) { //hide form $('.summary').fadeout('slow'); //show success message $('.success').fadein('slow'); $('#submit_fourth').attr("disabled", true); window.location = "http://www.stackoverflow.com"; //if process.php returned 0/false (send mail failed) } else alert('sorry, there has been problem form. thank you'); } }); //cancel submit button default behaviours return false; }); //back button $('.back').click(function(){ var container = $(this).parent('div'), previous = container.prev(); switch(previous.attr('id')) { case 'first_step' : $('#progress_text').html('0% complete'); $('#progress').css('width','0px'); break; case 'second_step': $('#progress_text').html('33% complete'); $('#progress').css('width','113px'); break; case 'third_step' : $('#progress_text').html('66% complete'); $('#progress').css('width','226px'); break; default: break; } $(container).slideup(); $(previous).slidedown(); }); }); and html...
<div class="outer-formbody"> <div class="formbody"> <a href="#" class="close">close</a> <div id="container"> <form action="#" method="post"> <!-- #second_step --> <div id="second_step"> <h3>book appointment</h3> <div class="form"> <input type="text" name="firstname" id="firstname" value="first name" /> <label for="firstname">your first name.<span>*</span></label><!-- clearfix --><div class="clear"></div><!-- /clearfix --> <input type="text" name="lastname" id="lastname" value="last name" /> <label for="lastname">your last name.<span>*</span></label><!-- clearfix --><div class="clear"></div><!-- /clearfix --> <input type="text" name="email" id="email" value="email address" /> <label for="email">your email address (not shared).<span>*</span></label> <!-- clearfix --><div class="clear"></div><!-- /clearfix --> <input type="text" name="phone" id="phone" value="phone number" /> <label for="email">your contact number (not shared).<span>*</span></label> </div> <!-- clearfix --><div class="clear"></div><!-- /clearfix --> <input class="submit" type="submit" name="submit_second" id="submit_second" value="" /> </div> <!-- #third_step --> <div id="third_step"> <h3>book appointment</h3> <div class="form"> <select id="service" name="service" class="required"> <option value="">please select</option> <option>power of attorney</option> <option>property trust</option> <option>disabled trust</option> <option>discretionary trust</option> <option>other trust</option> <option>protection / insurance</option> <option>other service</option> </select> <label for="service">select service require.<span>*</span></label> <!-- clearfix --><div class="clear"></div><!-- /clearfix --> <select id="location" name="location" class="required"> <option value="">please select</option> <option>staffordshire</option> <option>shropshire</option> <option>west midlands</option> <option>shropshire</option> <option>leicestershire</option> <option>birmingham</option> <option>cheshire</option> <option>other</option> </select> <label for="location">select home county.<span>*</span></label> <!-- clearfix --><div class="clear"></div><!-- /clearfix --> <select id="mirror" name="mirror" class="required"> <option value="">please select</option> <option>single</option> <option>couple</option> </select> <label for="country">single or 2 documents (for couple).<span>*</span></label> <!-- clearfix --><div class="clear"></div><!-- /clearfix --> <select id="from" name="from" class="required"> <option value="">please select</option> <option>nhs/school/council</option> <option>friend/family member</option> <option>other public sector employer</option> <option>private sector employer</option> <option>internet advert</option> <option>google</option> <option>newspaper</option> <option>netmums</option> <option>mumsnet</option> <option>other</option> </select> <label for="from">where did hear us?<span>*</span></label> </div><!-- clearfix --><div class="clear"></div><!-- /clearfix --> <input class="back" type="button" value="" /> <input class="submit" type="submit" name="submit_third" id="submit_third" value="" /> </div> <!-- #fourth_step --> <div id="fourth_step"> <h3>book appointment</h3> <div class="form"> <div class="success"> </br> </br> </br> </br> </br> <h3>booking submitted. <span>please wait . . .</span></h3> </div> <div class="summary"> <h3>summary</h3> <table class="table"> <tr><td>name</td><td></td></tr> <tr><td>email</td><td></td></tr> <tr><td>phone</td><td></td></tr> <tr><td>service</td><td></td></tr> <tr><td>location</td><td></td></tr> <tr><td>single/couple</td><td></td></tr> <tr><td>from</td><td></td></tr> </table> </div> </div> <!-- clearfix --><div class="clear"></div><!-- /clearfix --> <input class="back" type="button" value="" /> <input class="send submit" type="submit" name="submit_fourth" id="submit_fourth"value="" /> </div> </form> </div> <div id="progress_bar"> <div id="progress"></div> <div id="progress_text">0% complete</div> </div> <div></div> </div></div> </div> and php script process form....
<?php //retrieve form data. //get - user submitted data using ajax //post - in case user not support javascript, we'll use post instead $firstname = ($_get['firstname']) ? $_get['firstname'] : $_post['firstname']; $email = ($_get['email']) ?$_get['email'] : $_post['email']; $lastname = ($_get['lastname']) ?$_get['lastname'] : $_post['lastname']; $phone = ($_get['phone']) ?$_get['phone'] : $_post['phone']; $service = ($_get['service']) ?$_get['service'] : $_post['service']; $location = ($_get['location']) ?$_get['location'] : $_post['location']; $mirror = ($_get['mirror']) ?$_get['mirror'] : $_post['mirror']; $leadfrom = ($_get['leadfrom']) ?$_get['leadfrom'] : $_post['leadfrom']; //flag indicate method uses. if post set 1 if ($_post) $post=1; //if errors array empty, send mail if (!$errors) { //recipient $to = 'alex <clansey2004@yahoo.co.uk>'; //sender $from = $firstname . ' <' . $email . '>'; //subject , html message $subject = 'lead ' . $firstname; $message = ' <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> </br> <table> <tr><td>first name</td><td>' . $firstname . '</td></tr> <tr><td>lastname</td><td>' . $lastname . '</td></tr> <tr><td>location</td><td>' . $location . '</td></tr> <tr><td>email</td><td>' . $email . '</td></tr> <tr><td>phone</td><td>' . $phone . '</td></tr> <tr><td>service</td><td>' . $service . '</td></tr> <tr><td>mirror</td><td>' . $mirror . '</td></tr> <tr><td>lead from</td><td>' . $leadfrom . '</td></tr> </table> </body> </html>'; //send mail $result = sendmail($to, $subject, $message, $from); //if post used, display message straight away if ($_post) { if ($result) echo 'thank you! have received message.'; else echo 'sorry, unexpected error. please try again later'; //else if used, return boolean value //ajax script can react accordingly //1 means success, 0 means failed } else { echo $result; } //if errors array has values } else { //display errors message ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>'; echo '<a href="form.php">back</a>'; exit; } //simple mail function html header function sendmail($to, $subject, $message, $from) { $headers = "mime-version: 1.0" . "\r\n"; $headers .= "content-type:text/html;charset=iso-8859-1" . "\r\n"; $headers .= 'from: ' . $from . "\r\n"; $result = mail($to,$subject,$message,$headers); if ($result) return 1; else return 0; } ?> i sure have made silly mistake - appreciated!!
thanks
my guess need urlescape values encodeuricomponent(), slash inside.
Comments
Post a Comment