javascript - jQuery 从当前表单获取值

Question

大家好，我正在做一个项目，我很确定我犯了一个相当大的错误。基本上我有一些 PHP 代码从数据库中检索一些值，并且每一行在表中都有自己的值。然后每个都有一个删除按钮，其中显示一个小的下拉表单，要求提供一些详细信息以及提交按钮。然而，出于某种原因，我并没有想到会有多个表单，并且每个输入都有一个 id，从而导致多个元素具有相同的 id。

因此，在 JavaScript 中，当用户提交删除行时会发出 AJAX 请求，并且表单中的值(通过输入的 ID 找到值)会作为 POST 变量发送到 PHP 脚本。因为我这样做，所以 AJAX 请求仅在删除第一行时才起作用，而不是在该行之下的任何行。

因此，这个 HTML 是由 PHP 输出的，用于向每一行添加一个下拉表单:

<td class='dropdown'><a class='dropdown-toggle' href='#' data-toggle='dropdown'><button class='btn btn-warning'>Kick</button></a>
<div class='dropdown-menu' style='padding:15px; width:340px'>
    <div class='form-group'>
        <form id='delete-form'>
            <label for='delete-reason'>Reason: </label>
            <input class='form-control' id='delete-reason' name='delete-reason'>
            <input type='hidden' id='delete-id' name='delete-id' value='". $value['Name'] ."''>
            </div>
            <br>
            <input type='submit' id='delete-submit' name='delete-submit' value='Delete ". $value['Name'] ."' class='btn btn-default'>
        </form>
    </div>
</div>

然后我使用此 JavaScript 提交表单，通过 AJAX 请求将表单中的数据发送到 PHP 脚本。

$("#delete-form").submit(function(e){
e.preventDefault() // stop form from submitting
var reason = $("#delete-reason").val();
var id = $("#delete-id").val()

$.ajax({
    type: 'POST',
    url: 'php/ajax.php',
    data: { 
        deletereason: player,
        deleteid: id
    },
    success: function(response){
        $("#delete-result").append(response);
        $("#delete-result").fadeIn(500);
    }
})

})

所以，就像我说的，它只适用于第一行，因为在其他行上，它只是获取第一个找到的具有该 id 的输入的值。当我在第一行之外的任何行上执行此操作时，它都会将值添加为查询字符串，这不会执行任何操作，因为它不应该执行此操作。

但是我真的不知道如何让它从当前表单而不是其他表单获取值，这就是我在这里的原因。

我知道这一切都非常令人困惑，如果您需要我澄清任何事情或解释更多，我很乐意。

有什么建议吗？

Answer 1

您需要为每个 form 和 input 元素提供唯一的 ID，然后按照 @ArunPJohny 提供的答案进行操作。但是，如果您不能为每个元素提供唯一的 id，请按照以下代码操作

$(".form-group form").submit(function (e) {
    e.preventDefault() // stop form from submitting
    var reason = $(this).find("input[name='delete-reason']").val();
    var id = $(this).find("input[name='delete-id']").val();

    $.ajax({
        type: 'POST',
        url: 'php/ajax.php',
        data: {
            deletereason: player,
            deleteid: id
        },
        success: function (response) {
            $("#delete-result").append(response);
            $("#delete-result").fadeIn(500);
        }
    });
});