Using multiple forms to insert data to DB using Jquery & PHP without refreshing the page

I have working code for posting data to DB using PHP and Jquery without refreshing the page.

But however, I could only use 1 form with the given code, if I'm to add another form with different variables both the forms getting submitted.

My code goes as:

index:

Query starts

$countlikes = 1;
$countdislikes = 1;

<form data-id='<?= $countlikes?>' action="likeinsert" method="post" id="myform<?= $countlikes?>">
      <input type="hidden" id="fid<?= $countlikes?>" name="fid" value="<?php echo $f_id; ?>" />
      <input type="hidden" id="uid<?= $countlikes?>" name="uid" value="<?php echo $u_id; ?>" />
      <button style="border:none; background:transparent;" data-toggle="tooltip" data-placement="right" title="Like" class="up"><i class="fa fa-thumbs-o-up"></i><?= $f_likes; ?></button>
</form>

<form data-id='<?= $countdislikes?>' action="dislikeinsert" method="post" id="myform<?= $countdislikes?>">
      <input type="hidden" id="fid<?= $countdislikes?>" name="fid" value="<?php echo $f_id; ?>" />
      <input type="hidden" id="uid<?= $countdislikes?>" name="uid" value="<?php echo $u_id; ?>" />
      <button style="border:none; background:transparent;" data-placement="right" data-html="true" title="DisLike" class="down"><i class="fa fa-thumbs-o-down"></i><?= $f_dislikes; ?></button>
</form>

$countlikes ++;
$countdislikes ++;
Copy code

Query Ends

<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

      <script>
        $(document).on('submit','form',function(e){
            e.preventDefault();
            let id = $(this).data('id'); 
            $.post(
                'likeinsert.php',
                {
                    fid: $("#fid"+id).val(),
                    uid: $("#uid"+id).val()
                },
                function(result){
                    if(result == "success"){
                        $("#result").val("Values Inserted");
                    } else {
                        $("#result").val("Error");
                    }
                }
           );
        });
    </script>
    
    <script>
        $(document).on('submit','form',function(e){
            e.preventDefault();
            let id = $(this).data('id'); 
            $.post(
                'dislikeinsert.php',
                {
                    fiid: $("#fid"+id).val(),
                    uiid: $("#uid"+id).val()
                },
                function(result){
                    if(result == "success"){
                        $("#result").val("Values Inserted");
                    } else {
                        $("#result").val("Error");
                    }
                }
           );
        });
    </script>
Copy code

When I to click on any form button, both forms are getting submitted.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.