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);
        }
    });
});

jQuery从当前表单

1 个答案: