Book Top Rank with Contact Details visibility for your Business, Profession, Products or Services

Create a Comment Box with Display Data in HTML and JS

Question by Saravana s On 18 July 2022, 12:09:11

(Page Views: 312)
Report This Question

Business educational posts are for free. Please pay us INR 1000 or USD 20 before posting marketing content otherwise we will delete your account without any notice.

Submit

Answer by Saravana s On 18 July 2022, 12:10:26

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.

how to create a comment box in html and javascript

Live Preview

HTML Steps

A <textarea> tag should be created in HTML to type user comment. 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.

Syntax:

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.

Syntax:

data = "Comment: "+comment
document.getElementById("data").innerHTML = data

And 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.

Syntax:

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.