How to identify multiple forms in one template?

Question

I'm trying to implement a follower/following system in Django. In the template, all follow requests have a user and they all have user id's that can be displayed. The template is a profile page that contains several follow requests made by other users. I have created a separate form for each accept/decline and I want to uniquely identify each form so that I can submit that one and remove it subsequently.

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

{% else %}

{% endif %}




                                                            <div class="divider">

                                                            </div>





                                                            {% endfor %}
                                                    </div>

    $("#bond-request-accept-form").on('submit',function(){


      // Cleans the username
      // var each_bond_request = $();
      var raw_follower_username = $("#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'}, );
        },

      });


    });

Answer 1

You should create a standalone function to handle submit. And reference this function in each form you created.

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

Then in your template:

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

• Note the #follower-username should be nested within the form tag for jQuery to find the correct one.

Answer 2

First, I just want to say that I may be understanding your question wrong. If so, feel free to correct me.

If I am understanding this right, you have multiple copies of essentially the same form with slight variations depending on the user that is sending the request. Since IDs are meant to be unique and can cause issues in JavaScript if there are more than one instance of them, I would change the bond-request-accept-form to a class rather than an ID, and do something like this in JQuery:

$(".bond-request-accept-form").toArray().forEach(function(elem){
    $(elem).on('submit', function(){
        // Logic to perform when the form is submitted
    });
});

Answer 3

1. Put different URLs in the action for the two forms. Then you'll have two different view functions to deal with the two different forms.