Question

我有一个包含许多小一行表单的页面，每个表单有5个项目。表单具有id form1，form2，form3等，并且项目的id和提交按钮遵循相同的模式。我已经写出了以下ajax脚本，用于一次处理一个表单，其中变量$ n对应于表单和项目编号。我不确定的是如何为页面上的每个表单循环遍历此脚本。我是否需要先以某种方式计算页面上的表单数量，然后创建一个循环，如果是这样，我该怎么做？

$(".submit$n").click(function() {

        var action = $("#form$n").attr('action');
        var form_data = {
            name: $j("#name$n").val(),
            date: $j("#date$n").val(),
            attended: $j("#attended$n").val(),
            paid: $j("#paid$n").val(),
            method: $j("#method$n").val(),
            is_ajax: 1
        };

        $j.ajax({
            type: "POST",
            url: action,
            data: form_data,
            success: function(response){

                if(response == 'success')

                    $j("#form$n").fadeOut(800);
                    console.log(response);  
            }
        });

        return false;
    });

});

Answer 1

我很抱歉，但我不认为这是正确的设置，也不是接受的答案......它只是非常混乱。我不确定你的原始代码是否会复制到你拥有的每个表单中（因为整个$n变量让我感到困惑并让我觉得你有几次），但如果是这样的话就不需要了。这是我要用的：

$(document).ready(function () {
    $(".submit").click(function () {
        var $this = $(this);
        var $form = $this.closest("form");
        var action = $form.attr('action');

        var form_data = {
            name: $form.find("[id^=name]").val(),
            date: $form.find("[id^=date]").val(),
            attended: $form.find("[id^=attended]").val(),
            paid: $form.find("[id^=paid]").val(),
            method: $form.find("[id^=method]").val(),
            is_ajax: 1
        };

        $.ajax({
            type: "POST",
            url: action,
            data: form_data,
            success: function (response) {
                if (response == 'success') {
                    $form.fadeOut(800);
                }
                console.log(response);
            }
        });

        return false;
    });
});

只需为所有提交按钮提供一个“提交”类，这应该可以正常工作。只是为了确保您的HTML格式为：

<form id="form1" action="page1.php">
    <input type="text" id="name1" name="name1" /><br />
    <input type="text" id="date1" name="date1" /><br />
    <input type="text" id="attended1" name="attended1" /><br />
    <input type="text" id="paid1" name="paid1" /><br />
    <input type="text" id="method1" name="method1" /><br />
    <input type="submit" class="submit" value="Submit" />
</form>

只是让您了解正在发生的事情，Javascript会在点击时找到提交按钮的父窗体。然后，使用该表单，它会查找具有以“name”，“date”等开头的id属性的所有后代。您可以这样做，因为您已将控件明确地分隔为各自的表单。因此，使用此代码，您可以放心，当您单击提交按钮时，您将从其所在的表单中获取所有控件的值。

Answer 2

为所有提交按钮添加一个公共类，例如：<input type="submit" id="submit1" name="submit1" class="submit" />

然后将您的代码更改为：

$('.submit').on('click', function() {
    var n = this.id.substr(6);
    // n is the number of the form. 6 because the word submit has 6 characters.
    // You might want to do this some other way.

    // you can get the rest of the values by doing
    $('#name' + n).val()
    // and so on
});

循环使用ajax脚本来处理页面上的表单

2 个答案: