AJAX form working in Chrome but not IE of FF - php

Question

Hi really need some help...
First of all I know very little of jQuery / javascript, I learnt basic CSS a month back after having a website professionally built, then basic HTML, a few days ago I thought I would try my luck with jQuery but I am a total novis so if you answer please keep in mind I know almost nothing about these things - thanks!
I have been trying to make a new contact form, I have used bits of code from all over the net (so I know the code is probably very messy) anyway the resulting form seems to work fine in Chrome but in IE or FF or Safari on the submit it returns the 'Sorry, there has been a problem with this form' alert and nothing happens, I guess the PHP script is returning '1' to make this happen, but to be honest I am in over my head!
Below is the 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 the 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 the data from all the fields
var firstname = $('input[name=firstname]');
var email = $('input[name=email]');
var lastname = $('input[name=lastname]');
var phone = $('input[name=phone]');
//organize the data properly
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 the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "process.php",
//GET method is used
type: "GET",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
$('.summary').fadeOut('slow');
//show the 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 a problem with this form. Thank you');
}
});
//cancel the 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 the HTML...
<div class="outer-formbody">
<div class="formbody">
Close
<div id="container">
<form action="#" method="post">
<!-- #second_step -->
<div id="second_step">
<h3>Book your 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 your 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 the service you 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 your 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 two documents (for a 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 you hear about 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 your 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 the PHP script to process the form....
<?php
//Retrieve form data.
//GET - user submitted data using AJAX
//POST - in case user does 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 to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;
//if the errors array is empty, send the mail
if (!$errors) {
//recipient
$to = 'Alex <clansey2004#yahoo.co.uk>';
//sender
$from = $firstname . ' <' . $email . '>';
//subject and the html message
$subject = 'Lead from ' . $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 the mail
$result = sendmail($to, $subject, $message, $from);
//if POST was used, display the message straight away
if ($_POST) {
if ($result) echo 'Thank you! We have received your message.';
else echo 'Sorry, unexpected error. Please try again later';
//else if GET was used, return the boolean value so that
//ajax script can react accordingly
//1 means success, 0 means failed
} else {
echo $result;
}
//if the errors array has values
} else {
//display the errors message
for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
echo 'Back';
exit;
}
//Simple mail function with 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 am sure I have made a silly mistake - any help would be greatly appreciated!!
Thanks

Answer 1

My guess is you need to urlescape the values with encodeURIComponent(), especially those with a slash inside.