forms of same id in while loop - how to post formdata of user submitted form to php with jQuery AJAX?

Question

I have a while loop which creates forms like:

<?php
$i = 1;
while($i<10){
    ?>
<form id="update">
  <tr>
    <th scope="row"><?php echo $i;?></th>
    <td></td>
    <td></td>
    <td></td>
    <td><input type="text" maxlength="5" class="input-xs valid" name="plus" value="" /></td>
    <td><input type="submit" name="submit" class="btn btn-info btn-sm" value="Update" /></td>
    <td><input class="input-sm slip" name="slip" value="" disabled /></td>
    <td></td>
  </tr>
</form>

<?php $i++; }  ?>

I want to post the formdata of user-submitted form with jQuery AJAX.

Answer 1

your question is not clear but here is the answer - if you are generating the forms on the basis of while loop, then you need to pas that $i in every where in the form

<?php
            $i = 1;
        while($i<10){   

          ?>
    <form id="update_<?php echo $i ?>">
          <tr> 
          <th scope="row"><?php echo $i;?></th>
          <td></td>
          <td></td>
          <td></td>
          <td><input type="text" maxlength="5" class ="input-xs valid" id="plus_<?php echo $i?>"  name="plus" value=""></td>
          <td><input type="button" name="submit" class="btn btn-info btn-sm" value="Update" onclick="sub_form(<?php echo $i; ?>)"></td>
          <td><input class="input-sm slip" id="slip_<?php echo $i?>" name="slip" value="" disabled/></td>
          <td></td>
          </tr> 
         </form>
          <?php $i++; }  ?>

AJAX

function sub_form(val){
   var plus = document.getElementById('plus_'+val).value;
   var slip = document.getElementById('slip_'+val).value;
   $.ajax(
                {
                    type:"post",
                    url: "your url here",
                    data:{ plus:plus, slip:slip},
                    success:function(response)
                    {

                    }

                }
            );
}

hope it will work for you

Answer 2

You should add a class in form HTML node as below:

<form class="anyclass" action="add your action where you want to post form">

And after this, you can submit form as below:

$(".anyclass").submit(function(e) {
e.preventDefault
$.ajax({
       type: "POST",
       url:  $(this).attr('action'),
       data:  $(this).serialize(), 
       success: function(data)
       {
               alert('form submitted herer');
       }
});

Hope it helps you.