Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Myles Hyson
Myles Hyson
8,853 Points

Ajax Thank you message not showing up

I am submitting a form with Ajax and once the form is submitted I want the form and the regular header to not display and the thank you message to display in it's place. However when I submit the form, the form hides but the thank you div won't show. Please help. 

$('#thanks').hide();
$(function() {
    // Get the form.
    var form = $('#form');

    // Get the messages div.
    var formMessages = $('#thanks');

    // Set up an event listener for the contact form.
$(form).submit(function(event) {
    // Stop the browser from submitting the form.
    event.preventDefault();

    // Serialize the form data.
var formData = $(form).serialize();

// Submit the form using AJAX.
$.ajax({
    type: 'POST',
    url: $(form).attr('action'),
    data: formData,
    timeout: 3000
}).done(function(response) {
    // Make sure that the formMessages div has the 'success' class.
    $(form).hide();
    $('#thanks').show().fadeIn(1000);

    // Set the message text.
    $(formMessages).text(response);

    // Clear the form.
    $('#name').val('');
    $('#email').val('');
    $('#number').val('');
})

});
});

And here is the form 

<div class="newsletter" id="contact">
        <div class="row footer-top">
        <div class="large-12 medium-12 columns updates" id="error" ><h4><?php  echo $error_message; ?></h4></div>
        <div class="large-12 medium-12 columns updates" id="thanks" ><h4>Thanks! We'll be in touch shortly.</h4></div>
          <div class=" large-12 medium-12 column updates" id="normal">
            <h4>Want more info? Contact us!</h4>
            <p>Sign up to stay in touch with what's happening. Don't Worry, we don't spam.</p>
          </div>
        </div>
        <form data-abide id="form" method="post" action="wp-content/themes/myles_custom/mailer.php">
          <div class="row">
            <div class="large-8 large-centered columns">
              <label>Name:
                <input type="text" name="name" id="name" placeholder="Name" value="<?php if(isset($name)){echo htmlspecialchars($name);} ?>" required pattern="[a-zA-Z]+">
              </label>
              <small class="error">Name is required.</small>
            </div>
          </div>
          <div class="row">
            <div class="large-8 large-centered columns">
              <label>Email:
                <input type="email" id="email" name="email" placeholder="Email" value="<?php if(isset($email)){echo htmlspecialchars($email);} ?>" required>
              </label>
              <small class="error">Email is required</small>
            </div>
          </div>
          <div class="row">
            <div class="large-8 large-centered columns">
              <label>Number:
                <input type="tel" pattern="number" id="number" name="number" placeholder="Name" value="<?php if(isset($number)){echo htmlspecialchars($number);} ?>" required>
              </label>
              <small class="error">Number is required</small>
            </div>
          </div>
          <div class="row">
            <div class="large-8 large-centered columns">
              <label>Campus:
               <select id="campus" name="campus">
                <option>FSU</option>
                <option>FAMU</option>
                <option>TCC</option>
              </select>
              </label>
              <small class="error">Campus is required</small>
            </div>
          </div>
          <div id="sucks" style="display: none;">
          <label for="address" id="adress_label" style:"display: none;">Address</label>
          <input name="address" id="address" type="text" style="display: none;">
        </div>
          <div class="row"> 
            <div class="large-12 columns" style="text-align: center;">
              <button id="submit" type="submit" value="Send">Submit</button>
            </div>
          </div>
        </form>
      </div>
peyton caseria
peyton caseria
Courses Plus Student 12,281 Points

I am still practicing my AJAX, I'll suggest some people to assist you. I need to review AJAX more to help solve this problem.

Galen Cook
Galen Cook
2,463 Points

You have the fadeIn() method chained to the show() method. This is unnecessary. fadeIn will automatically unhide the div. Try changing it to this:

$('#thanks').fadeIn(1000);