1
嗨真的需要一些幫助......AJAX形式使用Chrome而不是IE的FF
首先我知道很少的jQuery/JavaScript的，我一個月學會了基本的CSS後面有一個網站專業打造後，然後是基本的HTML，幾天前我想我會試着用jQuery碰運氣，但我是一個完全novis，所以如果你回答，請記住，我幾乎不知道這些事情 - 謝謝！
我一直在嘗試做一個新的聯繫表單，我使用了來自全網的代碼（所以我知道代碼可能非常混亂）反正最終的形式似乎在Chrome中工作正常，但在IE或FF或Safari上提交它返回「對不起，這種形式的警報有問題，沒有任何反應，我猜PHP腳本返回'1'，以實現這一點，但說實話，我在我的頭！
下面是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._-][email protected][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();
});
});
和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 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>
和PHP腳本來處理表單....
<?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 <[email protected]>';
//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 '<a href="form.php">Back</a>';
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;
}
?>
我確信我犯了一個愚蠢的錯誤 - 任何幫助將不勝感激！
感謝
提示有關服務器的東西：而不是寫作$ val =（$ _GET ['val']）？ $ _GET ['val']：$ _POST ['val'];只需寫$ val = $ _REQUEST ['val']; – hrwath