AJAX Form Submitting (Only on Firefox)
I am running an AJAX contact form on my website (www.chrisanstey.co.uk), which is not submitting only in Firefox, but works absolute fine in every other browser. The form is uses the following PHP file:
<?php
$to = "me@somewhere.com"; //This is the email address you want to send the email to
if(!isset($_GET['action']))
{
die("You must not access this page directly!"); //Just to stop people from visiting contact.php normally
}
/* Now lets trim up the input before sending it */
$name = trim($_GET['name']); //The senders name
$email = trim($_GET['email']); //The senders email address
$subject = "A message sent from " . $name . " on Chris Anstey's portfolio"; //The senders subject
$message = trim($_GET['msg']); //The senders message
mail($to,$subject,$message,"From: ".$email.""); //a very simple send
echo 'contactarea|<p>Thank you '.$name.' for your message, I will reply to you as soon as I can.</p>'; //now lets update the "contactarea" div on the contact.html page. The contactarea| tell's the javascript which div to update.
?>
and also the following javascript file:
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sendemail() {
var msg = document.contactform.msg.value;
var name = document.contactform.name.value;
var email = document.contactform.email.value;
document.contactform.send.disabled=true;
document.contactform.send.value='Sending....';
http.open('get', 'contact.php?msg='+msg+'&name='+name+'&email='+email+'&action=send');
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
The form is within a Wordpress page, being called on the template by the following HTML:
<div id="contactarea">
<form name="contactform" id="contactform">
<p>Full Name:<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="name"></span></p>
开发者_如何学运维<p>Email:<br />
<span class="wpcf7-form-control-wrap your-email"><input type="text" name="email"></span></p>
<p>Message:<br />
<span class="wpcf7-form-control-wrap your-message"><textarea name="msg" rows="6" id="textarea"></textarea></span></p>
<p><input type="submit" value="Send Email" name="send" id="submitbutton" onClick="sendemail();"></p>
</form>
</div>
If anyone has any idea or has encountered similar problems with AJAX not working within Firefox, please could you reply. Any help would be much appreciated!
Well, your query could be cached, for one. Is it calling the php, or not? That code works for me in firefox, but after it works once, it should cache it, so it won't call it again.
i've tested it in firefox and the ajax call works fine... i dont think that's the problem.. try installing firebug addon on firefox so we could see what's the error message
EDIT:
if i understood correctly from your comment, the page changes when you click on the submit button, and you dont want that... if that's it, then just change the onClick
attribute on your submit button to this
onClick="sendemail();return false;"
or change your input submit to a input button... that's because when you click on a submit button, the form is sended even if you have a onClick event, so the return false
should stop it... it's the same with links when you want to prevent the default event
Good luck
精彩评论