感谢您在Ajax表单通过时未显示的消息

Question

I'm trying to hide the regular content and display a thank you message in it's place after a form is sent. However when the form sends, the fields reset but the thank you message won't appear. Please help. I'm not that great with jQuery.

I'm also using the foundation abide.js, don't know if that makes difference or not.

Here is the ajax code.

$(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();

    var formData = $(form).serialize();
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    }).done(function(response) {
        $('#thanks').show();
        $(form).hide();

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

This is the code for the form.

<div class="newsletter" id="contact">
    <div class="row footer-top">
        <div class="large-12 medium-12 columns updates" id="thanks" style="display: none;">
             <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>

Answer 1

You have a extra closing bracket in the code, and I also would not use $(form) with jquery instead use an id reference $("#form").

I made a quick working example at https://jsfiddle.net/mum1m1sc/

$("#myForm").submit(function(event) {
// Stop the browser from submitting the form.    
event.preventDefault();

var formData = $("#myForm").serialize();
$.ajax({
    type: 'POST',
    url: $("#myForm").attr('action'),
    data: formData
}).done(function(response) {
    $('#thanks').show();
    $("#myForm").hide();

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

});

<div class="newsletter" id="contact">
<div class="row footer-top">
    <div class="large-12 medium-12 columns updates" id="thanks" style="display: none;">
         <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="myForm" method="post" action="">
    <div class="row">
        <div class="large-8 large-centered columns">
            <label>
                Name:
                <input type="text" name="name" id="name" placeholder="Name" value="" 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="" 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" id="number" name="number" placeholder="Name" value="">
            </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 id="thanks" style="display:none;">
            <h3>Thanks</h3>
        </div>

hope that helps.