weixin_33686714 2014-07-16 11:37 采纳率: 0%
浏览 31

Ajax乘法表单提交

I have this app.js for my form from teamtreehouse blog I really liked it but i need tto use it for multiply forms including and a modal. I know that I should use $(this) but don't know where...

$(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('Возникла ошибка и телефон не удалось отправить!');
        }
    });

});

});

  • 写回答

1条回答 默认 最新

  • weixin_33711641 2014-12-30 08:54
    关注

    I deleted the previous comments and introduced new.

    $(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('Возникла ошибка и телефон не удалось отправить!');
                }
            });
    
        });
    });
    
    评论

报告相同问题?

悬赏问题

  • ¥20 请问,这个视频播放软件的名称
  • ¥15 运筹优化,gurobi,python
  • ¥20 画CAD几张图片内容如下1111111111111111111111111111111111111111111
  • ¥15 基于python的电影系统推荐
  • ¥20 springmvc重定向和返回json
  • ¥15 数学建模——参会安排怎么做
  • ¥15 电脑键盘实现触摸功能
  • ¥25 matlab无法将表达式转换为双数组怎么解决?
  • ¥15 单片机汇编语言相关程序
  • ¥20 家用射频美容仪技术规格