Preview:

<!DOCTYPE html>
<html>
 <head>
  <title>Comment System front end & back end</title>

<link rel="stylesheet" href="LAC.css" >
 </head>
 <body>
<div>
     <h2>comment section using PHP and Html</h2>
    <div>
    <form id="form">
        <label>Name</label>
        <input type="text"  placeholder="enter name" id="name">
        <br><br>
        <label>Message</label>
        <input type="text" placeholder="enter message" id="message">
        </form>
        <br>
        <button type="button" id="btn">send comment</button>
    </div>
     </div>
     <div id="content"></div>
     

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


    <script>
        $(document).ready(function(){
            function loadData(){
                $.ajax({
                    url: 'select-data.php',
                    type: 'POST',
                    success: function(data){
                        $("#content").html(data);
                    }
                });
            }

            loadData();

            $("#btn").on("click", function(e){
                e.preventDefault();
                var name = $("#name").val();
                var message = $("#message").val();

                $.ajax({
                    url: 'insert-data.php',
                    type: 'POST',
                    data: {name: name, message: message},
                    success: function(data){
                        if (data == 1) {
                            loadData();
                            alert('Comment Submitted Successfully');
                            $("#form").trigger("reset");
                        }else {
                            alert("Can not submite comment.");
                        }
                    }
                });
            });
        });
    </script>

    
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter