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

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) {

      // Cleans the username

      // var each_bond_request = $();

      var raw_follower_username = $(e).find("#follower-username").text().trim();

      var follower_username = raw_follower_username.replace("@","");

      console.log("Follower username: ",follower_username);

      $.ajax({

        type: "POST",

        url: "/accounts/user/" + follower_username +  "/accept_request",

        data:{

          "follower_username" : follower_username,

        },

        success: function(data){

          console.log(data);

          M.toast({html: follower_username + ' started following you',classes: 'green'}, );

        },

        error: function(data){

          console.log("All error data: ",data);

          M.toast({html: 'Failure',classes: 'red'}, );

        },

      });

      return false;

}

然后在您的模板中：

...

<form id="bond-request-accept-form" onsubmit="SubmitHandler(this)">

...

请注意，#follower-username 应该嵌套在 jQuery 的表单标签中以找到正确的标签。

Answer 2

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

Answer 3

首先，我只想说我可能理解你的问题是错误的。如果是这样，请随时纠正我。

如果我理解这一点是正确的，那么根据发送请求的用户的不同，您有多个基本相同表单的副本，但略有不同。由于 ID 是唯一的，如果有多个实例，可能会导致 JavaScript 出现问题，因此我会将bond-request-accept-formID更改为类而不是 ID，并在 JQuery 中执行以下操作：

$(".bond-request-accept-form").toArray().forEach(function(elem){

    $(elem).on('submit', function(){

        // Logic to perform when the form is submitted

    });

});