How to make a comment box in HTML, css, javascript, or jquery

I want to know how to make a comment box and how to post it.

example: when you type a reply and it adds it to the website.

Can you be more specifik, like in a forum?

1 Like

I mean a comment station where other people can comment like you just did to say that

test this out and see if it’s close?
if you don’t want to erase the input each time, just change this line …

$( "#para" ).append( txt );
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  </head>
  <body>  
    <div class="info">
      <label for="example">Enter Text
      </label>
      <input id="example" type="text"
             name="Ntext" size="20">
      <input id="sent" type="submit"  
             value="Send"> 
  </div>
    <p id="para">      
    </p>
  </body>
  <script>
    window.onclick = function(e)
    {   var id =  e.target.id;   
     if (id === 'sent')  
     { var txt = document.getElementById('example').value    
       $( "#para" ).empty().append( txt );
     }
    }
  </script>
</html>
2 Likes

You would need a database and store the replies as JSON that loads with the site, otherwise the comments would be removed if you refresh the page.

If you don’t care about that, you could with JS just get the value from the textbox and append it to some div with an eventlistener on the “reply” button.

When I reload the page it takes the comment off, and there can only be one comment, But the rest works.

You can just add the comments as append child to a parent-node. Instead of overwriting the old one.

To save the comments if you refresh you need a database and fetch the comments when the page loads.

I’m not good with databases

Everyone gotta start somewhere :slight_smile:

1 Like

I don’t even know how to make them

There is a curriculum about Apis And Microservices Certification (300 hours) that goes through it using Node.js and MongoDB.

How can you make the comments appear on a new line each time?

That’s what i want to know and how do you make it stay when reloaded

I want it for my website.

You can append child or use React with a loop that prints out JSX in a list. To keep it saved when reload you need to store the comments JSON in a database, like MongoDB.

I just want to know the code of how to do it

Theres a lot of code. You need to create a react app or a webbserver with example node.js that access a database. Google around for it node js mongodb.

for the above example, to get the input to empty, and add a new comment on a new line…

window.onclick = function(e)
    {   var id =  e.target.id;   
       if (id === 'sent')  
       { var txtbox = document.getElementById('example');  
         var txt = txtbox.value;
         $( "#para" ).append( txt + '<br>');
         $( txtbox ).val('');  
       }
    }

to keep input for a reload, you need to store the text that was input
( mebbe in an array) and send it to a database.

var a = [];
a.push(txt);
// send to DB here...

https://stackoverflow.com/questions/18722028/sending-data-to-database-using-jquery-ajax

1 Like

Still disappears When reloaded

Thanks everyone for your help. I found the answer on google. @Ronnehog you were right it is alot of code.
<head>

textarea{

resize: none;

outline: none;

width: 394px;

font-family: tahoma;

background: #f9f9f9;

}

textarea:focus{

background: #fff;

}

input[type=“submit”]{

width: 400px;

padding: 5px 0px;

font-weight: bold;

margin-top: -6px;

}

.content{

width: 100%;

}

.comments{

width: 400px;

margin: 30px auto;

}

.insert-text{

position: relative;

}

.insert-text .loading{

position: absolute;

bottom: -25px;

display: none;

}

.insert-text .total-comment{

position: absolute;

bottom: -25px;

right: 0px;

}

.insert-text .total-comment:before{

content: "Total comment: ";

font-weight: bold;

}

.list-comments{

margin-top: 30px;

border: 1px solid #ccc;

background: #f0f0f0;

}

.list-comments > div{

padding: 10px;

border-bottom: 1px solid #ccc;

}

.list-comments > div:last-child{

border-bottom: none;

}

.editor{

border: 1px solid #ccc;

border-radius: 5px;

}

.editor-header{

border-bottom: 1px solid #ccc;

}

.editor-header a{

display: inline-block;

padding: 10px;

color: #666;

}

.editor-header a:hover{

color: #000;

}

.editor-content{

padding: 10px;

outline: none;

min-height: 80px;

background: #f9f9f9;

border-radius: 0px 0px 5px 5px;

}

.editor-content:focus{

background: #fff;

}

b{

font-weight: bold;

}

i{

font-style: italic;

}

p{

line-height: 20px;

}

a{

text-decoration: none;

}

[data-role=“bold”]{

font-weight: bold;

}

[data-role=“italic”]{

font-style: italic;

}

[data-role=“underline”]{

text-decoration: underline;

}

[class^=“menu”] {

position: relative;

top: 6px;

display: block;

width: 27px;

height: 2px;

margin: 0 auto;

background: #999;

}

[class^=“menu”]:before {

content: ‘’;

top: -5px;

width: 80%;

position: relative;

display: block;

height: 2px;

margin: 0 auto;

background: #999;

}

[class^=“menu”]:after {

content: ‘’;

top: 3px;

width: 80%;

position: relative;

display: block;

height: 2px;

margin: 0 auto;

background: #999;

}

.menu-left {

margin-right: 5px;

}

.menu-left:before{

margin-right: 5px;

}

.menu-left:after{

margin-right: 5px;

}

.menu-right {

margin-left: 5px;

}

.menu-right:before{

margin-left: 5px;

}

.menu-right:after{

margin-left: 5px;

}

</head>

<body>

<div class=“content”>

<div class=“comments”>

&lt;div class="editor"&gt;

  &lt;div class="editor-header"&gt;

    &lt;a href='#' data-role='bold'&gt;B&lt;/a&gt;

    &lt;a href='#' data-role='italic'&gt;I&lt;/a&gt;

    &lt;a href='#' data-role='underline'&gt;U&lt;/a&gt;

    &lt;a href='#' data-role='justifyleft'&gt;&lt;i class="menu-left"&gt;&lt;/i&gt;&lt;/a&gt;

    &lt;a href='#' data-role='justifycenter'&gt;&lt;i class="menu-center"&gt;&lt;/i&gt;&lt;/a&gt;

    &lt;a href='#' data-role='justifyright'&gt;&lt;i class="menu-right"&gt;&lt;/i&gt;&lt;/a&gt;

  &lt;/div&gt;

  &lt;div id="text" class="editor-content" contenteditable&gt;

    &lt;p&gt;Let's make a statement!&lt;/p&gt;

    &lt;p&gt;This is an italicised sentence.&lt;/p&gt;

    &lt;p&gt;Very important information.&lt;/p&gt;

  &lt;/div&gt;

&lt;/div&gt;

&lt;div class="insert-text"&gt;

  &lt;span class="loading"&gt;Loading...&lt;/span&gt;

  &lt;span class="total-comment"&gt;&lt;/span&gt;

  &lt;p&gt;

    &lt;input type="submit" value="Comment" /&gt;

  &lt;/p&gt;

&lt;/div&gt;

&lt;div class="list-comments"&gt;

  &lt;div&gt;Hello!&lt;/div&gt;

  &lt;div&gt;My name's Tuan Linh.&lt;/div&gt;

&lt;/div&gt;

</div>

</div>

<script>

$(document).ready(function(){

$(".editor-header a").click(function(e){

e.preventDefault();

var _val = $(this).data("role"),

    _sizeValIn = parseInt($(this).data("size-val") + 1),

    _sizeValRe = parseInt($(this).data("size-val") - 1),

    _size = $(this).data("size");

if(_size == "in-size"){

  document.execCommand(_val, false, _sizeValIn + "px");

} else{

  document.execCommand(_val, false, _sizeValRe + "px");

}

});

});

$(document).ready(function(){

var $text = $("#text"),

  $submit = $("input[type='submit']"),

  $listComment = $(".list-comments"),

  $loading = $(".loading"),

  _data,

  $totalCom = $(".total-comment");

$totalCom.text($(".list-comments > div").length);

$($submit).click(function(){

if($text.html() == ""){

  alert("Plesea write a comment!");

  $text.focus();

} else{

  _data = $text.html();

  $.ajax({

    type: "POST",

    url: window.local,

    data: _data,

    cache: false,

    success: function(html){

      $loading.show().fadeOut(300);

      $listComment.append("&lt;div&gt;"+_data+"&lt;/div&gt;");

      $text.html("");

      $totalCom.text($(".list-comments &gt; div").length);

    }

  });

  return false;

}

});

});

</script>

</body>