Vfrdtyky

Inserting the data through AJAX it's working but pages refreshing, why is that give a feedback to fix this issues.

This is my ajax code

 <script>

        $(document).ready(function(){

            $("#button").click(function(){



                var postId=$("#postId").val();

                var userId=$("#userId").val();

                var postComm=$("#postComments").val();



                $.ajax({

                    url:'../validate/inserPostComm.php',

                    method:'POST',

                    data:{

                        poId:postId,

                        usId:userId,

                        poco:postComm

                    },

                   success:function(data){

                       //alert(data);

                   }

                });

            });

        });

    </script>

Here I'm using HTML

<form>

<input type="hidden" id="postId" name="postId" value="<?php echo $_GET["postId"]; ?>">

<input type="hidden" id="userId" name="userId" value="<?php echo $_SESSION["u_id"]; ?>">

<textarea placeholder="Post your comment" id="postComments"></textarea>

<button type="submit" id="button"><i class="fa fa-paper-plane"></i></button>

</form> 

Easy fix: Add a preventDefault(). Notice the 'e' I added to your click function.

<script>

        $(document).ready(function(){

            $("#button").click(function(e){

              e.preventDefault();



                var postId=$("#postId").val();

                var userId=$("#userId").val();

                var postComm=$("#postComments").val();



                $.ajax({

                    url:'../validate/inserPostComm.php',

                    method:'POST',

                    data:{

                        poId:postId,

                        usId:userId,

                        poco:postComm

                    },

                   success:function(data){

                       //alert(data);

                   }

                });

            });

        });

    </script>

You are facing it due to the button having input type “Submit”

<button type="submit" id="button"><i class="fa fa-paper-plane"></i></button>

Just change it to normal “button”

<button type="button " id="button"><i class="fa fa-paper-plane"></i></button>

You can prevent the default submit button behavior - submitting the form - with event.preventDefault();

 <script>

    $(document).ready(function(){

        $("#button").click(function(event){

            // prevent the default submit button behaviour

            event.preventDefault();

            var postId=$("#postId").val();

            var userId=$("#userId").val();

            var postComm=$("#postComments").val();



            $.ajax({

                url:'../validate/inserPostComm.php',

                method:'POST',

                data:{

                    poId:postId,

                    usId:userId,

                    poco:postComm

                },

               success:function(data){

                   //alert(data);

               }

            });

        });

    });

</script>

another ajax i'm using but some issue is coming page is refreshing.

<script>

    function inspire(x){

        var insPer =$("#insPer"+x).val();

        var insPos =$("#insPos"+x).val();





        $.ajax({

            url:'../validate/inspire.php',

            method:'POST',

            data:{

                u_id:insPer,

                p_id:insPos

            },

           success:function(data){

               //alert(data);

           }

        });

    }

</script>

this is html code

<input type="hidden" id="insPer<?php echo $p_id; ?>" name="insPer" value="<?php echo $_SESSION["u_id"]; ?>"> 



<input type="hidden" id="insPos<?php echo $p_id; ?>" name="insPos" value="<?php echo $p_id; ?>">



<a href="#" onclick="inspire(<?php echo $p_id; ?>);">

Better do this

$(document).ready(function(){

    	$("form#comment").submit(function(e) {

            e.preventDefault();    

              var formData = new FormData(this);

              // console.log(formData);

              $.ajax({

                  url: '../validate/inserPostComm.php',

                  type: 'POST',

                  data: formData, //The Form data contain array (postId,userId,postComments)

                  success: function (data) {

                      // do something if success

                  },

                  error: function(xhr, ajaxOptions, thrownError) {

                      //If error thrown here

                  }

            });

        });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="comment" method="post" enctype="multipart/form-data">

<input type="hidden" id="postId" name="postId" value="...">

<input type="hidden" id="userId" name="userId" value="...">

<textarea placeholder="Post your comment" id="postComments" name="postComments"></textarea>

<button type="submit" id="button"><i class="fa fa-paper-plane"></i></button>

</form>