问题：

访问submit按钮，该按钮是为循环中的每个项创建的-HTML jQuery AJAX

匡旭东

2023-03-14

我有一个wishlist页面，其中包含项目，每个项目都有一个删除按钮，这是在一个循环中使用表单创建的，每个按钮都有项目id作为值。我想在单击remove按钮时发出post请求，以便从数据库中删除该项目。

但问题是在循环中创建了许多具有相同id的按钮，那么我如何单独访问它们呢？

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>::WISHLIST::</h1>

    {% for wish in wishes %}
        <img src={{wish.image_path}} width="150" height="200">
        </br>
        {{wish.material}}
        {{wish.productType}}
        </br>
        {{wish.price}}
        </br>
        <form method="POST" target="_self">
            <button id="remove_wish" name="remove_wish" type="submit" value={{wish.id}}>Remove</button>
        </form>
        </br>
    {% endfor %}

    <script>
        $(document).ready(function() {
            $('#remove_wish').click(function (event) {
                event.preventDefault();
                alert($('#remove_wish').val())
           $.ajax({
            data : {
                    delete_wish : $('#remove_wish').val()
                    },
                type : 'POST',
                url : '/wishlist/',
                success: function (data) {
                    location.reload();
                },
                error: function (e) {
                    alert('something went wrong')
                }
            });
        });
        })
    </script>


</body>
</html>

在这里，我尝试使用相同的id，但这只适用于wishlist中最顶部的项目，对于其他项目，它会给出错误:noResultFound:No row was found for one（）

共有2个答案

杜海

2023-03-14

我有几个备选方案，你可以如何解决你的问题和一个提示。

提示:从foreach中删除

标记，否则您将为每个按钮创建一个表单。理想的情况是只有一个表单和几个按钮。像这样:

<form method="POST" target="_self">
    {% for wish in wishes %}
        <img src={{wish.image_path}} width="150" height="200">
        </br>
        {{wish.material}}
        {{wish.productType}}
        </br>
        {{wish.price}}
        </br>
        <button id="remove_wish" name="remove_wish" type="submit" value={{wish.id}}>Remove</button>
        </br>
    {% endfor %}
</form>

备选方案#1:正如@Cooper和@Shree已经告诉您的，您应该去掉id，而使用类。现在，将您的按钮包装在一个容器中，例如，一个div（它可以带有一个id或带有一个class)（请注意，这个容器也必须在您的foreach之外）。并将按钮的类型从提交更改为按钮。像这样:

<form method="POST" target="_self">
    <div id="divContainer">
        {% for wish in wishes %}
            <img src={{wish.image_path}} width="150" height="200">
            </br>
            {{wish.material}}
            {{wish.productType}}
            </br>
            {{wish.price}}
            </br>
            <button class="remove_wish" type="button" data-wishid={{wish.id}} >Remove</button>
            </br>
        {% endfor %}
    </div>
</form>

//and then you can manage all your buttons click events like this
$("#divContainer").on("click", "remove_wish", function() {
    var id = $(this).data('wishid');
    //the rest of your code
});

第二种选择:或者更简单，您可以使用onclick事件并将您的id传递给一个函数。像这样:

<form method="POST" target="_self">
    {% for wish in wishes %}
        <img src={{wish.image_path}} width="150" height="200">
        </br>
        {{wish.material}}
        {{wish.productType}}
        </br>
        {{wish.price}}
        </br>
        <button type="button" onclick="removeWish(" + {{wish.id}} +")" >Remove</button>
        </br>
    {% endfor %}
</form>

//and outside your $(document).ready(function()
function removeWish(id) {
    //the rest of your code
}

快乐的编码！

酆景辉

2023-03-14

DOM中不应该有多个元素具有相同的ID。

在您的按钮中更改以下内容:

向按钮添加类。假设remove_wish.
将按钮的id值更改为wish-{{wish.id}}（例如）。

在AJAX调用中，更改事件的选择器以侦听类选择器，而不是id选择器:

$('.remove_wish')

使用substring函数获取元素的id:

var id = $(this).attr('id');
var id_value = id.substring(5); //five because "wish-" has five characters.

我想这个应该能管用。

类似资料：

创建一个2x2按钮网格与中心按钮？

我有一个2x2的按钮网格。现在我想把按钮缩小到200x200，把每个按钮放在一个容器中作为一个空格，然后把每个按钮放在各自容器的中心。在我的图片中，我只缩小了顶部的两个按钮，以便您可以看到页面上的间距。我怎样才能从第一张图片转到第二张图片，这是Photoshop制作的？文件：app.js 文件：index.html
tkinter为循环传递命令参数创建按钮

我试图在一个for循环中创建按钮。在每个循环中，将i计数值作为命令值中的参数传递出去。因此，当从命令值调用函数时，我可以判断哪个按钮被按下并相应地操作。问题是，假设len是3，它将创建3个按钮，标题为“游戏1”到“游戏3”，但是当按下任何一个按钮时，打印值总是2，最后一次迭代。所以看起来按钮是作为单独的实体制作的，但是命令参数中的i值似乎都是一样的。下面是代码：有没有办法在每次迭代时获取当前的i
javafx 创建一个按钮

本文向大家介绍javafx 创建一个按钮，包括了javafx 创建一个按钮的使用技巧和注意事项，需要的朋友参考一下示例创建aButton很简单：这将创建一个新的Button，内部没有任何文本或图形。如果要Button使用文本创建一个，只需使用带有Stringas参数的构造函数（用于设置textProperty的Button）：如果您想创建一个Button内部带有图形或其他图形的Node，
JS button按钮实现submit按钮提交效果

本文向大家介绍JS button按钮实现submit按钮提交效果，包括了JS button按钮实现submit按钮提交效果的使用技巧和注意事项，需要的朋友参考一下今天在使用表单是同时使用POST更新、删除操作。然而form表单的 submit 且一旦提交则全部提交，所以想到的实现方法就是使用button实现,代码实现见如下： form设置：隐藏的act方法设置,代码如下: 最后关键的是 bu
qml 创建一个简单的按钮

本文向大家介绍qml 创建一个简单的按钮，包括了qml 创建一个简单的按钮的使用技巧和注意事项，需要的朋友参考一下示例您可以使用MouseArea组件轻松地在可单击按钮中转换每个组件。下面的代码显示一个360x360窗口，中间带有一个按钮和一个文本。按下按钮将更改文本：
在按下时创建一个按钮，在python 3.3的输入框中在该按钮上打印数字

问题内容：我想创建一个在其上写有“ 2”的按钮....现在，当任何人单击它时，它将在输入框中显示数字“ 2” …错误是：在单击之前，它已经显示了“输入框中的2’ 因此，请帮助我删除此错误，这是我的程序问题答案：传递一个函数（在下面的代码中使用），而不是函数的返回值。除此之外，从函数中提取Entry创建代码。否则，每次单击按钮时都会创建条目。
按下按钮时访问变量

我正在使用javafx编写一个小型棋盘游戏，我已经为棋盘上的每个“单元格”创建了一个网格。但是，在按下单元格按钮时，我在更改单元格颜色时遇到了一些问题。下面是我得到的一个错误:“Error:(44，43) java:从内部类引用的局部变量必须是final或有效的final” 但是，我不能将变量设为final——因为变量是for循环的一部分，如下所示: 这里真正的问题是，我需要向作为按钮数组一部
在Flutter中创建一个圆角按钮/带有边框半径的按钮

我目前正在Flutter中开发一个Android应用程序。如何添加圆角按钮？

访问submit按钮，该按钮是为循环中的每个项创建的-HTML jQuery AJAX

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档