Question

我有一个页面，可以包含1到100次代码块的迭代 - 在这个代码块中，字段等在每次迭代中具有相同的名称和ID，因为它包含在for循环中。

以下是循环代码的简单示例：

<div id="form" class="form">
    <form method="post" id="input_form" action="<?=$PHP_SELF?>" enctype="multipart/form-data">
        <input type="text" name="start" id="start">
        <input type="text" name="end" id="end">
        <input type="text" name="duration" id="duration">
        <button type="button" id="calc">Calc</button>
        <input type="submit" name="submit" value="Submit">
    </form>
</div>

对于普通的HTML表单提交目的，多次迭代工作正常，因为一次只能单击一个提交按钮，然后从开始和结束获取值并提交。

但是，我还需要能够通过AJAX对数据执行简单的计算，这就是问题发生的地方 - 因为我可以使用相同的ID从而触发1到100个按钮。我已经尝试将一个值附加到ID的末尾（例如在我的for循环中使用$ i），因此它们是唯一的但是我不能使用#calc来激活ajax调用，因为没有更多的元素叫做calc。

jQuery(document).ready(function () {
    $("#calc").click(function () {
        var start_date = $("#start").val();
        var end_date = $("#end").val();
        var dataString = 'start_date=' + start_date + '&end_date=' + end_date;
        $.ajax({
            type: "POST",
            url: "calc.php",
            data: dataString,
            success: function () {
                $('#duration').val(data);
            }
        });
    });
});

我需要使用正确的开始和结束来激活ajax，然后以用户正在使用的形式填写持续时间，而不知道有多少表单或正在使用的表单。

http://jsfiddle.net/g7Tya/1/

Answer 1

您需要相对于用户正在使用的表单创建侦听器和选择器：

您确实意识到您无法在页面上重复ID。它们必须是独一无二的。假设您将这些ID更改为类，我将编写以下代码：

jQuery(document).ready(function () {
    $(".button").click(function () { // add the class button to the submit
        var t = $(this);
        var start_date = t.prev(".start").val();
        var end_date = t.prev(".end").val();
        var dataString = 'start_date=' + start_date + '&end_date=' + end_date;
        $.ajax({
            type: "POST",
            url: "calc.php",
            data: dataString,
            success: function (data) {
                t.prev('.duration').val(data);
            }
        });
    });
});

Answer 2

你不应该抓住ajax成功的反应 success: function (data) { $('#duration').val(data); }

动态内容和ajax发布

2 个答案: