Php AJAX表单在Chrome中工作,但不是FF的IE
嗨,我真的需要帮助 首先,我对jQuery/javascript知之甚少,我在一个月前建立了一个专业的网站后学习了基本的CSS,然后学习了基本的HTML,几天前我想我会试试jQuery的运气,但我是一个彻头彻尾的novis,所以如果你回答,请记住我对这些事情几乎一无所知-谢谢 我一直在尝试制作一个新的联系人表单,我使用了网络上的一些代码(因此我知道代码可能非常混乱),无论如何,生成的表单在Chrome中似乎运行良好,但在IE或FF或Safari中,在提交时会返回“抱歉,此表单有问题”警报,但什么也没有发生,我猜PHP脚本会返回“1”来实现这一点,但老实说,我已经疯了 下面是jqueryPhp AJAX表单在Chrome中工作,但不是FF的IE,php,jquery,ajax,contact-form,Php,Jquery,Ajax,Contact Form,嗨,我真的需要帮助 首先,我对jQuery/javascript知之甚少,我在一个月前建立了一个专业的网站后学习了基本的CSS,然后学习了基本的HTML,几天前我想我会试试jQuery的运气,但我是一个彻头彻尾的novis,所以如果你回答,请记住我对这些事情几乎一无所知-谢谢 我一直在尝试制作一个新的联系人表单,我使用了网络上的一些代码(因此我知道代码可能非常混乱),无论如何,生成的表单在Chrome中似乎运行良好,但在IE或FF或Safari中,在提交时会返回“抱歉,此表单有问题”警报,但什么
$(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();
});
});
$(函数(){
//原始字段值
变量字段_值={
//id:值
“名字”:“名字”,
“姓氏”:“姓氏”,
“电子邮件”:“电子邮件地址”,
“电话”:“电话号码”,
};
//输入焦点
$('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']});
//重置进度条
$('#progress').css('width','0');
$('progress_text').html('0%完成');
//第二步
$('form').submit(函数(){return false;});
$(“#第二次提交”)。单击(函数(){
//删除类
$(“#第二步输入”).removeClass('error').removeClass('valid');
var emailPattern=/^[a-zA-Z0-9.-]+@[a-zA-Z0-9.-]+\[a-zA-Z]{2,4}$/;
变量字段=$(“#第二步输入[type=text]”);
var误差=0;
字段。每个(函数(){
var值=$(this.val();
if(value.length
我的猜测是你需要用encodeURIComponent()对值进行URL转义,特别是那些内部有斜线的值。我的猜测是你需要用encodeURIComponent()对值进行URL转义,特别是那些内部有斜线的值。关于服务器的提示:不要写$val=($\u GET['val'])?$\u GET['val']:$\u POST['val'];只写$val=$请求['val'];服务器提示:不要写$val=($获取['val'])?$获取['val']:$发布['val'];只写$val=$请求['val'];仍然没有乐趣:(感谢您的关注,我将代码更改为:var data='firstname='+encodeURIComponent(firstname.val())+'&email='+encodeURIComponent(email.val())+'&lastname='+encodeURIComponent(lastname.val())+'&phone='+encodeURIComponent(phone.val())+'&service='+encodeURIComponent($('select#service option:selected').val())+'+encodeURIComponent($('select#mirror option:selected').val())+')和location='+encodeURIComponent($($('select#mirror option:selected').val());我不确定我是否做得正确,但问题不是fixedIt在Chrom中也不起作用,因为ajax请求返回一个未找到的页面错误。该文件真的名为process.php吗?完整url:然后您需要发布到“./process.php”问题解决了!!!!!非常感谢Thomas,虽然它很简单,但仍然没有乐趣:(感谢您查看,我将代码更改为:var data='firstname='+encodeURIComponent(firstname.val())+'&email='+encodeURIComponent(email.val())+'&lastname='+encodeURIComponent(lastname.val())+'&phone='+encodeURIComponent(phone.val())+'&service='+encodeURIComponent($('select#service option:selected').val())+'&location='+encodeURIComponent($('select#service option:selected').val())+'&mirror='+encodeURIComponent($('select#mirror option:selected').val());我不确定我是否做得正确,但问题不是fixedIt在Chrom中也不起作用,因为ajax请求返回一个未找到的页面错误。该文件真的名为process.php吗?完整url:然后您需要发布到“./process.php”问题解决了!!!!!非常感谢你,托马斯,我以为事情会这么简单
<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
//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 '<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;
}
?>