Question

我的网站页脚部分有一个AJAX表单，可以接受电子邮件订阅。表单有两个字段 - 电子邮件和国家/地区 - 并且运行良好。

enter image description here

我现在在同一页面的顶部添加了一个链接（＆＃34;电子邮件更新＆＃34;），用于启动具有相同表单的对话框。

enter image description here

我使用ID（#footer-form）将页脚表单绑定到AJAX函数。

据我所知，每个页面只能使用一次ID，所以我想知道如何将第二种形式绑定到同一个AJAX函数。

我应该使用课吗？有没有办法绑定多个ID？

同样，我希望在可能出现的相同表单中使用相同的功能。

任何指导都将不胜感激。

这里是页脚形式的jQuery。

$(function() {

    // gets the form
    // how could I use this functions for multiple forms?  
    var form = $('#footer-form');

    // display responses to user
    var formMessages = $('#footer-form-messages');

    // set up event listener for contact form
    $(form).submit(function(e) {
        // disable html submit button
        e.preventDefault();

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

        // submit form using AJAX
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response) {
            // make sure formMessages element has 'success' class
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            // set message text
            $(formMessages).text('Subscription complete.');

            // clear form
            $('#site-signup-email').val('');
            $('#site-signup-country').val('');
        })
        .fail(function(data) {
            // make sure formMessages element has 'error' class
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            // set the message text
            $(formMessages).text('Error. Review and re-submit.');
        });
    });
 });

Answer 1

尝试这样：

$(function() {
    // display responses to user
    var formMessages = $('#footer-form-messages');

    // set up event listener for contact form
    $("form").submit(function(e) {
        // disable html submit button
        e.preventDefault();

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

        // submit form using AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: formData
        })
        .done(function(response) {
            // make sure formMessages element has 'success' class
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            // set message text
            $(formMessages).text('Subscription complete.');

            // clear form
            $('#site-signup-email').val('');
            $('#site-signup-country').val('');
        })
        .fail(function(data) {
            // make sure formMessages element has 'error' class
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            // set the message text
            $(formMessages).text('Error. Review and re-submit.');
        });
    });
 });

未经测试，但我猜到了这个消息。

您没有显示关于#site-signup-email和其他输入的代码，但您也应该能够相对于$(this)阅读它们。

Answer 2

我认为一个班级最适合并且改变

 var form = $('#footer-form');

到

 var form = $('.footer-form');

然后在引用表单id whit的表单中，像这样的类应该可以工作

 $('.footer-form #site-signup-email').val('');

***我还没有测试过它

在同一页面上从多个表单调用相同的AJAX函数

2 个答案: