Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Thanked 0 Times in 0 Posts

    Problem with AJAX contact form

    I'm using the Jquerys $.ajax() function to process the contact form on a page I am building.
    I am also using Jquery for the following effects to happen when the form is submitted - 1st to fadeout the contact form details, 2nd to change the class of the submit button to working(I am using a custom image for this, it changes the button text from "send it!" to "working"), 3rd to show the results from the php echo in place of the forms, 4th to fadeout the submit button itself.

    But the problem is that for some reason I cannot do a ".fadeOut" and neither does ".hide("slow")" seem to work. Only thing that I can do and that works is ".hide()".

    The XHTML of the form looks like this:

    <div id="main_wrapper">
    <form action="formmail.php" method="post" name="contact_form" id="contact_form">
    <!-- The ".loader" div class is used later in the JQuery. This is where the ajax "success" text will show up-->
    <div class="loader"></div>
    <!-- I use the ".section" span to mark the parts of the form that need to disappear upon submit -->
    <span class="section">
    <!-- the input forms themselves. I have a "name", "email" and "message" form -->
    <label for="name" class="label">Your full name:*</label>
    <input type="text" name="name" id="name" tabindex="10"  class="form" />
    <br />
    <label for="email" class="label" >Your e-mail:*</label>
    <input type="text" name="email" id="email" tabindex="20"  class="form" />
    <br />
    <label for="message" class="label" >Your message:</label>
    <textarea name="message" id="message" cols="45" rows="5" tabindex="30"   class="form"></textarea>
    <br />
    <!--The button-->
    <input name="submit" type="submit" id="Submit" tabindex="40" value="Send!" />
    The JQuery:

    $(function() {
    	//to trigger ajax on submit
    	$('#contact_form').submit( function(){
    		//to hide the form elements, I would like this to be with a delay, or a ".fadeOut" but from some reason it does not work that way
    		//to change the look of the submit button
    		//to send the ajax request  
    			type: 'post',
    			url: 'formmail.php',
    			data: 'name=' + $('#name').val() + '&email=' + $('#email').val() + '$comment=' + $('#message').val(),
    			success: function(data){
    //to hide the button, again neither hide delay nor ".fadeOut" work.
    			$('.loader').append(data); }	
    	return false;
    And the PHP:

    PHP Code:

    // you can specify which email you want your contact form to be emailed to here

    $toemail "myemail@mysite.com";
    $subject "some subject";

    $headers "MIME-Version: 1.0\n"
    ."From: \"".$name."\" <".$email.">\n"
    ."Content-type: text/html; charset=iso-8859-1\n";

    $body "Name: ".$name."<br>\n"
    ."Email: ".$email."<br>\n"

    <!--Display a thankyou message in the callback -->
    <h1><span>Thank you  <h10><?php echo $name ?></h10></span></h1>
      <span>Your message will be answered as soon as possible.</span>
    I also use Dreamweavers Spry framework for form validation before submit, but I dont think there is a need to post those scripts here, since they are not connected to the AJAX.

    I have hosted the form on a free host for practice HERE.
    Last edited by EnfantSauvage; 12-04-2010 at 04:01 PM. Reason: Fixed errors in the PHP

  • #2
    New to the CF scene
    Join Date
    Nov 2010
    Thanked 0 Times in 0 Posts


    Posting Permissions

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