Question

我有来自teamtreehouse blog我的表单的app.js 真的很喜欢它，但我需要使用它的多种形式，包括和一个模态。我知道我应该使用$（这个），但不知道在哪里......

$(function() {

// Get the form.
var form = $('.ajax-contact');

// Get the messages div.
var formMessages = $('.form-messages');

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

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

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    })
    .done(function(response) {
        // Make sure that the formMessages div has the 'success' class.
        $(formMessages).removeClass('text-error');
        $(formMessages).addClass('text-success');

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

        // Clear the form.
        $('#phone').val('');

    })
    .fail(function(data) {
        // Make sure that the formMessages div has the 'error' class.
        $(formMessages).removeClass('text-success');
        $(formMessages).addClass('text-error');

        // Set the message text.
        if (data.responseText !== '') {
            $(formMessages).text(data.responseText);
        } else {
            $(formMessages).text('Возникла ошибка и телефон не удалось отправить!');
        }
    });

});

}）;

Answer 1

我删除了以前的评论并引入了新的评论。

$(function() {
    // cache jQuery objects
    var $form = $('.ajax-contact'),
        $formMessages = $('.form-messages');

    $form.submit(function(e) {
        e.preventDefault();

        var $this = $(this); // context of form element
        // instead of $(this) you can use cached jquery object $form
        var formData = $this.serialize();
        // var formData = $form.serialize();

        $.ajax({
            type: 'POST',
            url: $this.attr('action'),
            data: formData
        })
        .done(function(response) {
            $formMessages.removeClass('text-error'); // cached jquery object
            $formMessages.addClass('text-success');

            $formMessages.text(response);

            $('#phone').val('');

        })
        .fail(function(data) {
            $formMessages.removeClass('text-success');
            $formMessages.addClass('text-error');

            if (data.responseText !== '') {
                $formMessages.text(data.responseText);
            } else {
                $formMessages.text('Возникла ошибка и телефон не удалось отправить!');
            }
        });

    });
});

Ajax乘法表单提交

1 个答案: