如何在一个模板中识别多个表单？

Question

  我正在尝试在 Django 中实现一个关注者/关注者系统。在模板中，所有关注请求都有一个用户，并且它们都有可以显示的用户 ID。该模板是一个个人资料页面，其中包含其他用户提出的多个关注请求。我为每个接受/拒绝创建了一个单独的表单，我想唯一地标识每个表单，以便我可以提交该表单并随后将其删除。

<div class="col s12 l6 trending-panel container">

    <h4>

    Requests

    </h4>

    <div class="divider"></div>

    {% for bond_request in bond_requests %}

    {% if bond_request.accepted == False %}

<div>

    <div class="row bond-request-row" id="{{bond_request.by_user.id}}">

        <div class="col s6">

                <a href="{% url 'accounts:profile' bond_request.by_user.username %}">

                    <div class="col s8">

                            <img class="profile-image-request" src="https://m.media-amazon.com/images/M/MV5BNjUxNDcwMTg4Ml5BMl5BanBnXkFtZTcwMjU4NDYyOA@@._V1_.jpg" alt="">

                    </div>

                    <div class="col s4">

                    <h6 id="follower-username">

                    @{{bond_request.by_user}}

                </h6>

            </div>

            </a>

        </div>  

        <div class=" col s12 center accept-decline-margin">

        <div class="col s12 l6">

            <form action="accounts:accept_bond_request" method="POST" id="bond-request-accept-form">

                    <!-- <a href="#" id="bond-request-accept"  class="green-text white btn">

                        <div>

                                <ion-icon name="add"></ion-icon>

                        <span>Accept</span>

                        </div>

                    </a> -->

                    <button  id="bond-request-accept"  class="green-text white btn" type="submit">Accept</button>

            </form>

        </div>

        <div class="col s12 l6">

                <a  href="" class="grey-text white btn">

                    <div class="">

                            <ion-icon name="remove"></ion-icon>

                        <span>Ignore</span>

                    </div>

                    </a>

        </div>

        </div>

    </div>

<!--  HERE -->

</div>

Answer 1

您应该创建一个独立的函数来处理提交。并在您创建的每个表单中引用此函数。function SubmitHandler (e) {&nbsp; &nbsp; &nbsp; // Cleans the username&nbsp; &nbsp; &nbsp; // var each_bond_request = $();&nbsp; &nbsp; &nbsp; var raw_follower_username = $(e).find("#follower-username").text().trim();&nbsp; &nbsp; &nbsp; var follower_username = raw_follower_username.replace("@","");&nbsp; &nbsp; &nbsp; console.log("Follower username: ",follower_username);&nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; url: "/accounts/user/" + follower_username +&nbsp; "/accept_request",&nbsp; &nbsp; &nbsp; &nbsp; data:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "follower_username" : follower_username,&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; M.toast({html: follower_username + ' started following you',classes: 'green'}, );&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("All error data: ",data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; M.toast({html: 'Failure',classes: 'red'}, );&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; return false;}然后在您的模板中：...<form id="bond-request-accept-form" onsubmit="SubmitHandler(this)">...请注意，#follower-username 应该嵌套在 jQuery 的表单标签中以找到正确的标签。

Answer 2

在两个表单的操作中放置不同的 URL。然后你将有两个不同的视图函数来处理这两种不同的形式。

Answer 3

首先，我只想说我可能理解你的问题是错误的。如果是这样，请随时纠正我。如果我理解这一点是正确的，那么根据发送请求的用户的不同，您有多个基本相同表单的副本，但略有不同。由于 ID 是唯一的，如果有多个实例，可能会导致 JavaScript 出现问题，因此我会将bond-request-accept-formID更改为类而不是 ID，并在 JQuery 中执行以下操作：$(".bond-request-accept-form").toArray().forEach(function(elem){&nbsp; &nbsp; $(elem).on('submit', function(){&nbsp; &nbsp; &nbsp; &nbsp; // Logic to perform when the form is submitted&nbsp; &nbsp; });});