I built an AJAX script for submitting emails from a website. It works fine in FireFox but not in IE or Safari.
This has me quite baffled. Worst yet both IE or Safari have junk for error reporting I get these one line error messages both pointing at the Javascript function that validates the input and then submits the form to another function to send to the PHP script for emailing.
I am surprised that Firefox is not giving me any trouble, in the past it has reported errors even when something appeared to work and this time nothing.
Here's the code as I am sure someone will ask but I suspect it something in how they both handle my code.
// ALL: custom trim function so javascript can make sure that no required filed is left blank
function trim(str) {
return str.replace(/^\s+|\s+$/g,"");
}
// CONTACT FORM: checks the form one last time before creating the data for AJAX to send to php script.
function Contactvalidate() {
var error = '';
if(trim(document.getElementById('email').value) != '') {
var femail = trim(document.getElementById('email').value);
var tempd = new Array();
tempd = femail.split('@');
if (tempd[1]) {
var temp = new Array();
temp = tempd[1].split('.');
if(!temp[1]) {
error += 'Please enter a valid E-mail address, so we can reply to your email<br>';
}
}
else {
error += 'Please enter a valid E-mail address, so we can reply to your email<br>';
}
}
else {
error += 'Please fill in the E-mail field, as we would like to reply to your email<br>';
}
if((trim(document.getElementById('notes').value) == '') || (document.getElementById('notes').value.length < 5)) {
error += 'Please fill in the Message field<br>';
}
if(error != '') {
document.getElementById('proccess').innerHTML = error;
document.getElementById('proccess').style.display = 'block';
}
else {
document.getElementById('proccess').style.display = 'none';
var addcontact = (document.getElementById('addcontact').checked) ? 'yes' : 'no';
// CONTACT FORM: data to send to the AJAX function
var params = "formtype="+document.getElementById('formtype').value;
params += "&fname="+document.getElementById('name').value;
params += "&femail="+document.getElementById('email').value;
params += "&fsubject="+document.getElementById('subject').value;
params += "&fnotes="+document.getElementById('notes').value;
params += "&faddcontact="+addcontact;
sendmail(params);
}
}
// EMAILING DATA: the AJAX function
function sendmail(params) {
var url = 'email.php'
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.open("POST", url, true);
req.setRequestHeader('User-Agent','XMLHTTP/1.0');
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-length", params.length);
req.setRequestHeader("Connection", "close");
req.onreadystatechange = processReqChange;
req.send(params);
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.open("POST", url, true);
req.setRequestHeader('User-Agent','XMLHTTP/1.0');
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-length", params.length);
req.setRequestHeader("Connection", "close");
req.onreadystatechange = processReqChange;
req.send(params);
}
}
}
// EMAILING DATA: once data is returned to the AJAX function this process XML sent from email.php
function processReqChange() {
if (req.readyState == 4) {
if (req.status == 200) {
var mailresponse = req.responseXML.documentElement;
try {
formstatus(mailresponse.getElementsByTagName("status")[0].childNodes[0].nodeValue);
}
catch (error) {
formstatus('error');
}
}
}
}
// EMAILING DATA: displays user freindly success or errors reported to the AJAX function
function formstatus(status) {
if((document.getElementById('formtype').value == 'Contact Form') && (status == 'error')){
document.getElementById('proccess').innerHTML = 'An Error Has Occured! Please try sending the email again';
document.getElementById('proccess').style.display = 'block';
return true;
}
else if((document.getElementById('formtype').value == 'Contact Form') && (status == 'success')){
document.getElementById('proccess').innerHTML = 'Thank you ' + document.getElementById('name').value + ' for contacting us.<br>Your ' + document.getElementById('subject').value + ' has been sent to <i>contact@theirwesite.org</i>';
document.getElementById('proccess').style.display = 'block';
alert('Thank you ' + document.getElementById('name').value + ' for contacting us. Your ' + document.getElementById('subject').value + ' has been sent to contact@theirwebsite.org');
return true;
}
else{
return false;
}
}
Safari' web inspector says: "Cannot find variable: Contactvalidate()
IE says: Object expected
I have double checked the code for any element that may be missing or misnamed but everything appears to be in order.
Even as I sit typing this I am think of new search queries for Google to see if I get any answers and nothing seems to even come close to telling me what is going on.