Question

我正在尝试隐藏常规内容，并在发送表单后在其中显示感谢信息。但是，当表单发送时，字段重置但不会出现感谢信息。请帮忙。我对jQuery并不是那么棒。

我也在使用基础abide.js，不知道是否有所不同。

这是ajax代码。

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

这是表单的代码。

<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

您在代码中有一个额外的结束括号，我也不会将$(form)与jquery一起使用，而是使用ID引用$("#form")。

我在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>

希望有所帮助。

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

1 个答案: