How to create a Comment Box in HTML and Javascript
This tutorial is about how to create a comment box using HTML and javascript. We’ll also see, how to display the comment data you provide in a comment. We need to get the input using the <textarea> tag in the HTML and find the input value with javascript and display it.
Live Preview
See the Pen
Untitled by Wonderdevelop (@wonderdevelop)
on CodePen.
HTML Steps
A <textarea> tag should be created in HTML to type user comments. You must add an ID attribute to the <textarea> tag and give it a value because we can find the comment/input value in Javascript only by using the ID value.
Syntax:
<textarea id ="comment" >Your text here</textarea>In HTML you need to add <button> tag or <input> tag to create a submit button. You can use either button or input tag whichever you want. For the javascript function to work once you click the submit button, Use the “onclick” attribute and give the name of the JavaScript function as the value. You just need to specify this element in HTML.
Syntax:
<input id=submit" type="button" onclick="myFunction()" >
JS Step
To find the comment value, use the below function and enter the value of the ID given in the <textarea> in HTML replace “your ID name“. And whatever variable name you want to save this comment value, give it in the “name” field inside the function.
function myFunction(){
var name = document.getElementById("your ID name").value
}All comment values must be assigned to the variable “data”. You can use the concatenations(+) method to store multiple comment/input values in one variable. Use the geELmentById method and give it in the ID ‘data’ is equal to your stored comment value variable name “data”. To display the comment value must be added code <p id="data"></p> in HTML.
data = "Comment: "+comment
document.getElementById("data").innerHTML = dataAnd if the user submits an empty comment then an alert message should be given to him, For that, we need to write an if condition statement in javascript. In the below code, If the user submits without any comment, the alert message “please fill all the boxes” will display.
if(!comment){
alert("please fill all the box")
return }CSS Step
Only if you add CSS styles your comment box will look beautiful and users will like it. If you use only HTML and js without CSS it won’t look good, so use CSS for styling and design.
How to create a comment box in HTML and javascript
<!DOCTYPE html>
<html>
<head>
<title>How to create Comment Box</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box; }
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f6f6;
font-family: 'Roboto', sans-serif;}
.container{
width: 600px;
border: 2px solid #333;
padding: 15px 10px;
background-color: silver;
box-shadow: ;}
.container h2{
text-align: center;
margin-bottom: 15px}
textarea{
height: 20px;
width: 100%;
border: none;
border-bottom: 2px solid #aaa;
background-color: transparent;
margin-bottom: 10px;
resize: none;
outline: none;}
textarea:focus::-webkit-input-placeholder{
opacity: 0;}
input[type="button"], button{
padding: 10px 15px;
border: none;
outline: none;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;}
input[type="button"]{
color: #fff;
background-color: #273c75}
button{
color: #333;
background-color: transparent}
.btn{
display: none
}</style>
</head>
<body>
<div class="container">
<h2>Leave Us a Comment</h2>
<form><textarea placeholder='Username' id ="userName" name="name"></textarea>
<div class="btn">
<textarea placeholder='Add your comment' id ="userComment" name="comment"></textarea>
<input id="submit" type="button" onclick="myFunction()" value="Submit">
<button>Cancel</button>
</div></form>
<p id="data"></p></div>
<script type="text/javascript">
var feild = document.querySelector('textarea');
var backUp = feild.getAttribute('placeholder');
var btn = document.querySelector('.btn');
var clear = document.getElementById('clear')
feild.onfocus = function(){
this.setAttribute('placeholder', '');
this.style.borderColor = '#333';
btn.style.display = 'block'}
feild.onblur = function(){
this.setAttribute('placeholder',backUp);
this.style.borderColor = '#aaa'}
//find user input
function myFunction(){
let name = document.getElementById("userName").value
let comment = document.getElementById("userComment").value
// alert if user not enter value
if(!name || !comment){
alert("please fill all the box")
return }
//display input value
data = "<br/><u>Your Submitted Data:</u><br/><br/>User Name : "+name+"<br/>Comment: "+comment
document.getElementById("data").innerHTML = data
}
//clear input data when click submit
let btnClear =document.querySelector('input');
let inputs=document.querySelectorAll('textarea');
btnClear.addEventListener('click',()=> {
inputs.forEach(textarea =>textarea.value='');
})
</script></body></html>Conclusion
I hope this article is useful for you. If any other doubt asks them in the comment box.
This is awesome!
Thank you so much for this helpful tutorial. I’m looking for something like this for my project. I’ve came across a website with very nice comments design. On the page where visitors can make comments on, there is a little discussion image with number of comments next to it. Clicking on the discussion image with open the comment input page where visitors can enter their comments/feedback and also see all the comments.
I’d like this design. Can you tell us how to design this discussion image with number of comments next to it?
Jack