Django Ajax 表单提交的 For 循环

Question

我有一个 for 循环，它创建多个模式弹出窗口及其在模式弹出窗口内的相应形式。我通过 Ajax 方法提交表单，以免页面刷新。但是我面临的问题是，如果我有多个表单，则只有第一个表单会正确提交。后续表单将提交第一个表单的值。目前，我已将 JavaScript 放在

{% for form,post in zipped %}

和

{% endfor %}

之间的结束表单标记之后的 for 循环中。我的想法是，当值

{{post.pk}}

发生变化时，我会监听不同的表单，因为我使用了唯一的表单 id

formy{{post.pk}}

作为 JavaScript 中的选择器。然而它不起作用。

我的脚本是：

<script>                
    $('#formy{{post.pk}}').on("submit" , function(e){
        e.preventDefault();

        $.ajax({
            type:"POST",
            
            data:{
                tag:$('#tag').val(),
                author:$('#author').val(),
                file_name:$("#file_name").val(),
                file_path:$("#file_path").val(),
                unique_id:$("#key").val(),
                csrfmiddlewaretoken:$("input[name=csrfmiddlewaretoken]").val(),
            },
            success:function(){
                alert("UPDATED!!!!");
            }
        });
    });
</script>

我的html代码是：

{% for form, post in zipped %}
    <tr>
        <td><img src={{post.file_path}} style="width: 300px;"></td>
        <td>{{post.tag}} {{post.pk}}</td>
        <td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal{{post.pk}}"> Edit Tag </button>
    </td>
    
    <form  id="formy{{post.pk}}">
        {% csrf_token %}
        <div class="modal fade" id="myModal{{post.pk}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Edit Tags</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{form|crispy}} {{post.pk}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endfor %}

Answer 1

在研究如何解决这个问题时，我几乎遇到了完全相同的问题。我不太了解“JavaScript”（所以可能有更好的方法来实现这一点）但是，这对我有用。我希望它可以帮助其他遇到这个问题的人。

#1。将“脚本”放入 for 循环中 #2.通过特定的 id 引用每个数据项。

<script>                
    $('#formy{{post.pk}}').on("submit" , function(e){
        e.preventDefault();

        $.ajax({
            type:"POST",
            
            data:{
                tag:$('#tag{{post.pk}}').val(),
                author:$('#author{{post.pk}}').val(),
                file_name:$("#file_name{{post.pk}}").val(),
                file_path:$("#file_path{{post.pk}}").val(),
                unique_id:$("#key{{post.pk}}").val(),
                csrfmiddlewaretoken:$("input[name=csrfmiddlewaretoken]").val(),
            },
            success:function(){
                alert("UPDATED!!!!");
            }
        });
    });
</script>

我对“Crispy Forms”也不太熟悉。只需确保每个表单元素都有一个唯一的 id 即可。与“ajax”数据匹配。

示例：