WordPress.org

Support

Support » How-To and Troubleshooting » This Ajax Code doesn't work in WordPress

This Ajax Code doesn't work in WordPress

  • I’m trying to implement an ajax contact form. In a static site it works well but in WordPress in spite of that i can sent mails. The contact form stops showing the message “sending mail”. I don’t know what’s the problem.

    Here you can see the contact form working well on a static page: http://www.elated.com/res/File/articles/development/javascript/jquery/slick-ajax-contact-form-jquery-php/

    This is the Javascript code where ajax is:

    var messageDelay = 2000;  // How long to display status messages (in milliseconds)
    
    // Init the form once the document is ready
    $( init );
    
    // Initialize the form
    
    function init() {
    
      // Hide the form initially.
      // Make submitForm() the form's submit handler.
      // Position the form so it sits in the centre of the browser window.
      $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );
    
      // When the "Send us an email" link is clicked:
      // 1. Fade the content out
      // 2. Display the form
      // 3. Move focus to the first field
      // 4. Prevent the link being followed
    
      $('a[href="#contactForm"]').click( function() {
        $('#content').fadeTo( 'slow', .2 );
        $('#contactForm').fadeIn( 'slow', function() {
          $('#senderName').focus();
        } )
    
        return false;
      } );
    
      // When the "Cancel" button is clicked, close the form
      $('#cancel').click( function() {
        $('#contactForm').fadeOut();
        $('#content').fadeTo( 'slow', 1 );
      } );  
    
      // When the "Escape" key is pressed, close the form
      $('#contactForm').keydown( function( event ) {
        if ( event.which == 27 ) {
          $('#contactForm').fadeOut();
          $('#content').fadeTo( 'slow', 1 );
        }
      } );
    
    }
    
    // Submit the form via Ajax
    
    function submitForm() {
      var contactForm = $(this);
    
      // Are all the fields filled in?
    
      if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {
    
        // No; display a warning message and return to the form
        $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
        contactForm.fadeOut().delay(messageDelay).fadeIn();
    
      } else {
    
        // Yes; submit the form to the PHP script via Ajax
    
        $('#sendingMessage').fadeIn();
        contactForm.fadeOut();
    
        $.ajax( {
          url: contactForm.attr( 'action' ) + "?ajax=true",
          type: contactForm.attr( 'method' ),
          data: contactForm.serialize(),
          success: submitFinished
        } );
      }
    
      // Prevent the default form submission occurring
      return false;
    }
    
    // Handle the Ajax response
    
    function submitFinished( response ) {
      response = $.trim( response );
      $('#sendingMessage').fadeOut();
    
      if ( response == "success" ) {
    
        // Form submitted successfully:
        // 1. Display the success message
        // 2. Clear the form fields
        // 3. Fade the content back in
    
        $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
        $('#senderName').val( "" );
        $('#senderEmail').val( "" );
        $('#message').val( "" );
    
        $('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );
    
      } else {
    
        // Form submission failed: Display the failure message,
        // then redisplay the form
        $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
        $('#contactForm').delay(messageDelay+500).fadeIn();
      }
    }// JavaScript Document

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. Or better still – use the pastebin. As it stands, your code may now have been permanently damaged/corrupted by the forum’s parser.]

Viewing 6 replies - 1 through 6 (of 6 total)
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘This Ajax Code doesn't work in WordPress’ is closed to new replies.
Skip to toolbar