Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member
    Join Date
    Dec 2010
    Posts
    7
    Member #
    25415
    I'm using the Jquerys $.ajax() function to process the contact form on a page that I am building.
    I am also using Jquery for the following effects to happen when the form is submitted:

    1st. To validate the forms before submit. (I use THIS plug in for validation)
    2nd. To hide the contact form details.
    3rd. To put an animation in place of the forms while the form is processed.
    4th. To hide the animation and show the results from the PHP echo in place of the forms.

    But since I'm am new to both jQuery and PHP I have run into this big problem - AJAX does not start.
    The form is validated successfully, the emails are sent, but nothing from the AJAX code is initiated.

    The XHTML of the form looks like this:

    HTML Code:
    <body>
    <body>
    <div id="main_wrapper">
    
    <form action="formmail.php" method="post" id="contact_form">
    
    //I use the "loader" and "bar" divs for the animation and the echo message from the php
    <div class="loader"></div>
    <div class="bar"><a id="working"></a></div>
    
    <fieldset class="section">
    
    <label for="name" >Your full name:*</label>
    <input type="text" id="name"  name="name" class="validate[required, minCheckbox[2]]" minlength="2" />
    <br />
    <label for="email">Your e-mail:*</label>
    <input type="text" id="email"  name="email" class="validate[custom[email]]"  />
    <br />
    <label for="message" >Your message:*</label>
    <textarea name="message" id="message" cols="45" rows="5" tabindex="30"   class="form">
    </textarea>
    <br />
    <input name="submit" type="submit" id="Submit" tabindex="40" value="Send!" />
    </fieldset>
    </form>
    </div>
    </body>
    The JQuery:

    Code:
    //this is to validate the forms, works with an external JS
    $(document).ready(function() { 
    
    $("#contact_form").validationEngine({	/* create the form validation */
    		inlineValidation: false,
    		promptPosition: "centerRight",
    		success :  function(){use_ajax=true},	/* if everything is OK enable AJAX */
    		failure : function(){use_ajax=false}	/* in case of validation failure disable AJAX */
    	 }) 
    
    //this is for the AJAX
    $(document).ready(function() { 
    
       //to preload images
       $('<img />')
        .attr('src', '../ajax-loader.gif')
        .load(function(){
            $('.profile').append( $(this) ); })
       
        //to trigger ajax on submit
           ('#contact_form').submit( function(e){
    	e.preventDefault();
            
            //to hide the form elements
            $('.section').hide();
            //to place the animation in their place
    	$('.loader').append($('.bar'));
    	$('.bar').css({display:'block'}); 
            
            //to send the ajax request  
            $.ajax({
                type: 'post',
                url: 'formmail.php',
                data: '&name=' + $('#name').val() + '&email=' + $('#email').val() + '$comments=' + $('#message').val(),
                success: function(data){
    //to hide the animation
                $('.bar').css({display:'none'}); 
                $('.loader').append(data); }    
        });
        });
    });
    });
    And the PHP:

    PHP Code:

    <?php
      $name
    =addslashes($_POST['name']);
      
    $email=addslashes($_POST['email']);
      
    $comments=addslashes($_POST['message']);


      
    $toemail "myemail@mysite";
      
    $subject "Some sunject";

      
    $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"
                
    ."Comments:<br>\n"
                
    .$comments;


        
    mail($toemail$subject$body$headers);

    ?>
    <h1><span>Thank you <h10><?php echo $name?></h10></span></h1>
    <p>
      <span>I will respond to you as soon as I am able.</span>
    </p>
    I have uploaded the form to a free host for practice and you can find and test it HERE.

  2.  

  3. #2
    Junior Member
    Join Date
    Dec 2010
    Posts
    7
    Member #
    25415
    Update - I have fixed problems 2 and 3.

    The only thing I need help with now is how to fade out the contact forms instead of instantly hiding them when the forms are submitted.

  4. #3
    Senior Member paintingtheweb's Avatar
    Join Date
    Jul 2007
    Location
    Las Vegas
    Posts
    128
    Member #
    15503
    I can see 2 things that might be causing this. Do you have a url to test by chance?

    #1. is 'button' defined somewhere else? I don't see it in your code anywhere...
    #2. you're using return false; on the submit function which might be cause this too. Try using preventDefault() instead:

    Code:
    $(function() {
    //to trigger ajax on submit
      $('#contact_form').submit( function(e){
    //prevents the event's default action from occuring. In this case, submitting the form.
        e.preventDefault();
    
    //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
        $('.section').hide();
    
     //to change the look of the submit button
        $(':submit').addClass("working");
    
    //to send the ajax request
        $.ajax({
          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.
            //button.hide(); //if button is defined somewhere else, try using fadeOut here
            button.fadeOut("slow");
            $('.loader').append(data);
          }    
        });
      });
    });

  5. #4
    Junior Member
    Join Date
    Dec 2010
    Posts
    7
    Member #
    25415
    Quote Originally Posted by paintingtheweb View Post
    I can see 2 things that might be causing this. Do you have a url to test by chance?

    #1. is 'button' defined somewhere else? I don't see it in your code anywhere...
    #2. you're using return false; on the submit function which might be cause this too. Try using preventDefault() instead:

    Code:
    $(function() {
    //to trigger ajax on submit
      $('#contact_form').submit( function(e){
    //prevents the event's default action from occuring. In this case, submitting the form.
        e.preventDefault();
    
    //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
        $('.section').hide();
    
     //to change the look of the submit button
        $(':submit').addClass("working");
    
    //to send the ajax request
        $.ajax({
          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.
            //button.hide(); //if button is defined somewhere else, try using fadeOut here
            button.fadeOut("slow");
            $('.loader').append(data);
          }    
        });
      });
    });
    Thank you for answering, but I have done many changes in the original code since I first posted.
    I just edited and updated the first post with the new scripts, and the new problems .
    I also removed Dreamweavers Spry (It made a mess with the XHTML, and didn't connect well with the JQuery ajax - but I might return it, since the new plug in is giving me even even more trouble, but that's probably just because I don't know how to use it )
    You can find all the details in the first post, as well as a working example.

  6. #5
    Senior Member paintingtheweb's Avatar
    Join Date
    Jul 2007
    Location
    Las Vegas
    Posts
    128
    Member #
    15503
    Your Javascript looks like it needs some double checking...try this:
    Code:
    //this is to validate the forms, works with an external JS
    $(document).ready(function() { 
      $("#contact_form").validationEngine({	/* create the form validation */
        inlineValidation: false,
        promptPosition: "centerRight",
        success :  function(){use_ajax=true},	/* if everything is OK enable AJAX */
        failure : function(){use_ajax=false}	/* in case of validation failure disable AJAX */
    	});
    	 
      //to preload images
      $('<img />')
        .attr('src', '../ajax-loader.gif')
        .load(function(){
          $('.profile').append( $(this) ); 
        });
    		
      //to trigger ajax on submit
      $('#contact_form').submit( function(e){
        e.preventDefault();
        //to hide the form elements
        $('.section').hide();
        //to place the animation in their place
        $('.loader').append($('.bar'));
        $('.bar').css({display:'block'}); 
            
        //to send the ajax request  
        $.ajax({
          type: 'post',
          url: 'formmail.php',
          data: '&name=' + $('#name').val() + '&email=' + $('#email').val() + '$comments=' + $('#message').val(),
          success: function(data){
            //to hide the animation
         	  $('.bar').css({display:'none'}); 
            $('.loader').append(data);
          }    
        });
      });
    });

  7. #6
    Junior Member
    Join Date
    Dec 2010
    Posts
    7
    Member #
    25415
    Thank you for fixing that for me, Ajax now works again, but , from some reason now the weird emails are back again as well...
    If i make AJAX to work, I receive e-mails like this one

    Name: "the correct senders name"
    Email:"the correct email of the sender is here" $comments="What should be the main message is displayed here?!"
    Comments:
    "this section is completely empty!?"
    And if the AJAX code is incorrect, than my emails are correct
    Its probably something with this part, but i don't get what:
    Code:
    data: '&name=' + $('#name').val() + '&email=' + $('#email').val() + '$comments=' + $('#message').val(),

  8. #7
    Junior Member
    Join Date
    Jan 2011
    Location
    India
    Posts
    9
    Member #
    26054
    you have a typo in the data string. change '$comments=' to '&comments='

  9. #8
    Junior Member
    Join Date
    Dec 2010
    Posts
    7
    Member #
    25415
    Quote Originally Posted by tutorialstag View Post
    you have a typo in the data string. change '$comments=' to '&comments='
    That way I don't receive the "comments" at all... ???

    Thanks for the reply anyway

  10. #9
    Junior Member
    Join Date
    Jan 2011
    Location
    India
    Posts
    9
    Member #
    26054
    Quote Originally Posted by EnfantSauvage View Post
    That way I don't receive the "comments" at all... ???

    Thanks for the reply anyway
    But you are getting the value for $email from ajax, right? You should separate the post variables with "&" in order to differentiate all input data. As you are missed "&" in front of comments, the "$comments=" get assigned as a value to $email.

  11. #10
    Junior Member
    Join Date
    Dec 2010
    Posts
    7
    Member #
    25415
    Quote Originally Posted by tutorialstag View Post
    But you are getting the value for $email from ajax, right? You should separate the post variables with "&" in order to differentiate all input data. As you are missed "&" in front of comments, the "$comments=" get assigned as a value to $email.
    Is the problem with the php? Can you please show me what am I supposed to change?
    Im just trying to learn... Thanks.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com