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.

First off, each form needs their own ID. ID's must be unique within the document. Then regarding posting the form using ajax, there are MANY tutorials online. You should really read some and make some attempts before asking. — M. Eriksson, Feb 12 '19 at 07:05
Possible duplicate of [jQuery Ajax POST example with PHP](https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — Manuel Spigolon, Feb 12 '19 at 07:06

score 1 · Answer 1 · answered Feb 12 '19 at 07:11

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

score 0 · Answer 2 · answered Feb 12 '19 at 07:08

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.

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

2 Answers2