如何从多种形式提交每个表格

Question

I'm trying to build a friend request system. I have registered users, which echo with an add button and each user has a form that is automatically created when a user creates an account. My problem is how do I submit each form? With what I have now when this users add button is submitted it will submit only the form of the first user in the database even when the add button is for the 4 or 5 user.

index.php

<div class="users_b">
     <?php
     include 'db.php';

        $sq = "select * from alert_users_account";
        $query = mysqli_query($con,$sq);
        while($row = mysqli_fetch_assoc($query)){

     ?>
     <div class="user_dis_p" id="user<?php echo $row['id']?>">
     <div id="user_img"><a href="alert_profile.php?id=<?php echo $row['id']?>"><img src="alert<?php echo $row['photo']; ?>">
     </a></div> <div id="user_fs">
     <a href="alert_profile.php?id=<?php echo $row['id']?>">
     <?php  echo $row['firstname']." "." "." "." ".$row['surname'];?></a><form id="upload_file_f">
     <input type="text" name="friend_id" id="friend_id" value="<?php echo $row['id']?>" readonly>
     <input type="submit" value="submit">
    </form>
</div>
</div>

<script>
$(document).ready(function(e){
$("#upload_file_f").on("submit",function(e){
e.preventDefault();

$.ajax({
   type: "post",
   url:"request.php",
   data:new FormData(this),
   contentType:false,
   processData:false,
   cache:false,
   success: function(data){
   $("#msg").html(data);
   }

});

});

});
</script>

Answer 1

If you have

<form id="upload_file_f"  ...

<form id="upload_file_f"  .... '

and

$("#upload_file_f").on("submit", ....

Well, you cant expect the forms to work because the ID's are supposed to be unique. Instead of re-using the Id, you must have a truly unique form id, or use a class or such as your jquery selector.

 $("form").on( "submit", ....

   //// $(this) within the on callback refers to the match of the selector that was clicked.

if you look in your form callback there is no dependency there to the ID.

 <form class="myfrom" ....

And

$(".myform").on("submit",function(e){
    e.preventDefault();

    $.ajax({
       type: "post",
       url:"request.php",
       data:new FormData(this),
       contentType:false,
       processData:false,
       cache:false,
       success: function(data){
        $("#msg").html(data);
       }

    });
});

Should work fine. The only part that comes close to a dependency is this

$("#msg").html(data);

And likewise this could be a class ( .msg ) for example then you just do something like this

$(".myform").on("submit",function(e){
    e.preventDefault();

    var that = $(this); //ajax scope placeholder

    $.ajax({
       type: "post",
       url:"request.php",
       data:new FormData(this),
       contentType:false,
       processData:false,
       cache:false,
       success: function(data){
            that.find(".msg").html(data);
       }

    });
});