0

我有一个页面有很多小的单行表格，每个表格有 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;
    });

});
4

2 回答 2

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 会找到提交按钮的父表单。然后，使用该表单，它会查找所有具有id以“名称”、“日期”等开头的属性的后代。您可以这样做，因为您已将控件清楚地分隔为它们自己的表单。因此，使用此代码，您可以放心，当您单击提交按钮时，您会从它所在的表单中获取所有控件的值。

于 2013-02-14T03:59:47.970 回答
0

为所有提交按钮添加一个通用类，例如：<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
});
于 2013-02-13T22:44:58.873 回答