SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Works in IE, doesn't work in Firefox. AJAX mail form.

    After completing in the fields required. It should process the information and send the email. After there, displaying a "Thank you." at the bottom of the form.

    It works in IE like clockwork, but when all the fields are valid and pass in Firefox, it just reloads the page and doesn't display the "Thank you." therefore, not sending the email.

    If you can spot where the error is, I would much appreciate it.

    Thank you for your time.

    Contact Form using AJAX

    Here's the code for those who don't wish to leave the site (I'll just post the script instead of the entire file):

    Code:
    <?
    if(!isset($rnd) || !isset($name) || !isset($email) || !isset($subject) || !isset($body)) {
    	showform();
    } else {
    	processform();
    }
    
    function processform(){
    	global $name, $email, $subject, $body;
    
    	$email_to1 = "email@mail.com"; // Fake just for demo purpose
    	$email_from1 = $email;
    	$email_subject = "Contact Form: ".stripslashes($subject);
    	$email_message = "Please find below a message submitted by '".stripslashes($name);
    	$email_message .="' on ".date("d/m/Y")." at ".date("H:i")."\n\n";
    	$email_message .="Email of sender: ".stripslashes($email)."\n\n";
    	$email_message .="--------- START OF SUBMITTED MESSAGE ---------\n\n";
    	$email_message .= stripslashes($body);
    	$email_message .="\n\n--------- END OF SUBMITTED MESSAGE ---------\n\n";
    
    	// SEND EMAIL TO email_to1 - message to you!!
    	$headers = 'From: '.$email_from1."\r\n" .
       'Reply-To: '.$email_from1."\r\n" .
       'X-Mailer: PHP/' . phpversion();
    
    	mail($email_to1, $email_subject, $email_message, $headers);
    
    	echo "Thank You.";
    	die();
    } // end processform()
    
    function showform() {
    ?>
    <html>
    <head>
    <title>.contact form</title>
    <link rel="stylesheet" type="text/css" href="css/form.css">
    <script type="text/javascript">
    <!--
    var http = createRequestObject();
    var areal = Math.random() + "";
    var real = areal.substring(2,6);
    
    function createRequestObject() {
    	var xmlhttp;
    	try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); }
      catch(e) {
        try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
        catch(f) { xmlhttp=null; }
      }
      if(!xmlhttp&&typeof XMLHttpRequest!="undefined") {
      	xmlhttp=new XMLHttpRequest();
      }
    	return  xmlhttp;
    }
    
    function sendRequest() {
    	var rnd = Math.random();
    	var name = escape(document.getElementById("name").value);
    	var email = escape(document.getElementById("email").value);
    	var subject = escape(document.getElementById("subject").value);
    	var body = escape(document.getElementById("body").value);
    
    	try{
        http.open('POST',  'contact.php');
        http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        http.onreadystatechange = handleResponse;
    		http.send('name='+name+'&email='+email+'&subject='+subject+'&body='+body+'&rnd='+rnd);
    	}
    	catch(e){}
    	finally{}
    }
    
    function check_values() {
    	var valid = document.getElementById("valid").value;
    	if(real !== valid) {
    		alert("Please enter the 4 digits as they appear.");
    		return false;
    	}
    
    	var name = document.getElementById("name").value;
    	var email = document.getElementById("email").value;
    	var subject = document.getElementById("subject").value;
    	var body = document.getElementById("body").value;
    	if(trim(name) == "" ||
    		trim(email) == "" ||
    		trim(subject) == "" ||
    		trim(body) == "") {
    			alert("Please complete all fields");
    	} else {
    		if(isEmail(email)) {
    			document.getElementById("submit").disabled=true;
    			document.getElementById("submit").value='Please Wait..';
    			sendRequest();
    		} else {
    			alert("Email appears to be invalid. Please check.");
    			document.getElementById("email").focus();
    			document.getElementById("email").select();
    		}
    	}
    }
    
    function handleResponse() {
    	try{
        if((http.readyState == 4)&&(http.status == 200)){
        	var response = http.responseText;
          document.getElementById("confirmation").innerHTML = response;
          document.getElementById("confirmation").style.display ="";
          document.getElementById("form").style.display = "none";
    		}
      }
    	catch(e){}
    	finally{}
    }
    
    function isUndefined(a) {
       return typeof a == 'undefined';
    }
    
    function trim(a) {
    	return a.replace(/^s*(S*(s+S+)*)s*$/, "$1");
    }
    
    function isEmail(a) {
       return (a.indexOf(".") > 0) && (a.indexOf("@") > 0);
    }
    
     // -->
     </script>
    
    <?
    } // end showform()
    ?>

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ForeverIrise View Post
    After completing in the fields required. It should process the information and send the email. After there, displaying a "Thank you." at the bottom of the form.

    It works in IE like clockwork, but when all the fields are valid and pass in Firefox, it just reloads the page and doesn't display the "Thank you." therefore, not sending the email.

    If you can spot where the error is, I would much appreciate it.
    It could be a timing problem. Perhaps FX is diallowing XMLHttpRequest after a submit event.

    I notice that check_values() doesn't return a value.

    Also your trim function is seriously defective and has an aversion to the letter 's'. A popular algorithm is
    Code:
    function trim(a)
    {
     return a.replace(/^\s+|\s+$/, "");
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post

    I notice that check_values() doesn't return a value.
    Sorry, I didn't post the entire code. Here is some more of where the check_values() function is in action.

    Code:
    <form>
    <span class="darkB">Name:</span><br>
    <input type="text" id="name" size="40" maxlength="30" class="text" /><br>
    
    <span class="darkB">Email:</span><br>
    <input type="text" id="email" size="40" maxlength="30" class="text" /><br>
    
    <span class="darkB">Subject:</span><br>
    <input type="text" id="subject" size="40" maxlength="30" class="text" /><br>
    
    <span class="darkB">Message:</span><br>
    <textarea cols="38" rows="7" id="body" wrap="physical"></textarea><br>
    
    <span class="darkB">Enter Digits '<script language="javascript">document.write(real)</script>' below:</span><br>
    
    <input type="text" id="valid" size="40" maxlength="4" class="text" /><br>
    
    <input type="submit" value="Submit" id="submit" name="Submit" class="button" onClick="return check_values();">
    <input type="reset" value="Reset" id="reset" name="Reset" class="button"><br>
    <div id="confirmation"></div>
    </form>

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form submission

    Hey there,

    This is silly, but I think the problem is the submit button. Try changing the action of the form to "javascript:void(0)" so that it does nothing on submission, then change the submit button from type="submit" to type="button" and then see what happens.

    I think in Firefox what happens is that the submit action (whatever the action is for the form) fires BEFORE any validation functions. So I just remove the option to press enter and submit the form and require the user to click on the submit button. You could also use a onkeydown event and check to see if the focus is on the button to allow users with accessibility issues to still be able to submit your email form.

    Dave

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dwees View Post
    Hey there,

    This is silly, but I think the problem is the submit button. Try changing the action of the form to "javascript:void(0)" so that it does nothing on submission, then change the submit button from type="submit" to type="button" and then see what happens.

    I think in Firefox what happens is that the submit action (whatever the action is for the form) fires BEFORE any validation functions. So I just remove the option to press enter and submit the form and require the user to click on the submit button. You could also use a onkeydown event and check to see if the focus is on the button to allow users with accessibility issues to still be able to submit your email form.

    Dave
    Wow, that did it. I would have never thought of that solution. Thank you very much for your time and effort. I really appreciate it.

    -Cesar


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •