What is the method for displaying the value of a textarea?

Question

What is the method for displaying the value of a textarea?

I am relatively new to the world of coding, but I have already delved into HTML, CSS, and basic DOM scripting.

My goal is simple - I want to create a comment box where people can leave messages like in a guestbook. However, when I input text and click on 'comment', nothing seems to happen. How can I enable users to type a message and see it displayed below? Any help with this issue would be greatly appreciated!

If anyone has encountered this problem before and knows how to solve it, please share your insights.

function fn1() {
  var str = document.getElementById("text1").value;
  alert("Thank you!");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: white;
  font-family: sans-serif;
  /*
  background-image: url(guest.jpg);
  background-size: 450px;
  */
}

.container {
  width: 600px;
  border: 2px solid black;
  padding: 15px 10px;
}

.container h2 {
  text-align: center;
  margin-bottom: 15px;
}

textarea {
  height: 25px;
  width: 100%;
  border: none;
  border-bottom: 2px solid gray;
  background-color: transparent;
  margin-bottom: 10px;
  resize: none;
  outline: none;
  transition: .5s
}

.btn button {
  padding: 10px 15px;
  border: none;
  outline: none;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  color: white;
  background-color: orange;
}

button {
  color: gray;
  background-color: lightgray;
}

<!DOCTYPE html>
<html>

<head>
  <title>Visitor comment</title>
  <link rel="stylesheet" type="text/css" href="visitor.css">
</head>

<body>
  <div class="container">
    <h2>Leave Us a Comment</h2>
    <form>
      <textarea id="text1" placeholder="Add Your Comment"></textarea>
      <div class="btn">
        <button onclick="fn1()" id="btn1">Comment</button>
        <!-- <button>Cancel</button> -->
      </div>
    </form>
  </div>
  <p id="result"></p>
  <script type="visitor.js"></script>
</body>

</html>

javascript html css

Answer 1

Answer №1

There are a couple of important steps you need to take in order to achieve the desired outcome. If you have any questions, do not hesitate to ask for clarification.

Firstly, it is crucial to prevent the form from submitting. This can be achieved by binding a function to the onsubmit event.

Secondly, you will need to add the value of the textbox to the result paragraph dynamically.

Any additional styling requirements should be manageable at your end. In my example, I am using a list but this is not mandatory.

function fn1() {
  let li = document.createElement("LI");
  let text = document.createTextNode(document.getElementById("text1").value);
  li.appendChild(text)
  document.getElementById("result").appendChild(li);
  alert("Thank you!");

}

function submithandler(event) {
  event.preventDefault();
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: white;
  font-family: sans-serif;
  /*background-image: url(guest.jpg);
    background-size: 450px;*/
}

.container {
  width: 600px;
  border: 2px solid black;
  padding: 15px 10px;
}

.container h2 {
  text-align: center;
  margin-bottom: 15px;
}

textarea {
  height: 25px;
  width: 100%;
  border: none;
  border-bottom: 2px solid gray;
  background-color: transparent;
  margin-bottom: 10px;
  resize: none;
  outline: none;
  transition: .5s
}

.btn button {
  padding: 10px 15px;
  border: none;
  outline: none;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  color: white;
  background-color: orange;
}

button {
  color: gray;
  background-color: lightgray;
}

<!DOCTYPE html>
<html>

<head>
  <title>Visitor comment</title>
  <link rel="stylesheet" type="text/css" href="visitor.css">
</head>

<body>
  <div class="container">
    <h2>Leave Us a Comment</h2>
    <form onsubmit="submithandler(event)">
      <textarea id="text1" placeholder="Add Your Comment"></textarea>
      <div class="btn">
        <button onclick="fn1()" id="btn1">Comment</button>
        <!-- <button>Cancel</button> -->
      </div>
    </form>
  </div>
  <ul id="result"></ul>
  <script type="visitor.js"></script>
</body>

</html>

Answer 2

There are a couple of important steps you need to take in order to achieve the desired outcome. If you have any questions, do not hesitate to ask for clarification.

Firstly, it is crucial to prevent the form from submitting. This can be achieved by binding a function to the onsubmit event.

Secondly, you will need to add the value of the textbox to the result paragraph dynamically.

Any additional styling requirements should be manageable at your end. In my example, I am using a list but this is not mandatory.

function fn1() {
  let li = document.createElement("LI");
  let text = document.createTextNode(document.getElementById("text1").value);
  li.appendChild(text)
  document.getElementById("result").appendChild(li);
  alert("Thank you!");

}

function submithandler(event) {
  event.preventDefault();
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: white;
  font-family: sans-serif;
  /*background-image: url(guest.jpg);
    background-size: 450px;*/
}

.container {
  width: 600px;
  border: 2px solid black;
  padding: 15px 10px;
}

.container h2 {
  text-align: center;
  margin-bottom: 15px;
}

textarea {
  height: 25px;
  width: 100%;
  border: none;
  border-bottom: 2px solid gray;
  background-color: transparent;
  margin-bottom: 10px;
  resize: none;
  outline: none;
  transition: .5s
}

.btn button {
  padding: 10px 15px;
  border: none;
  outline: none;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  color: white;
  background-color: orange;
}

button {
  color: gray;
  background-color: lightgray;
}

<!DOCTYPE html>
<html>

<head>
  <title>Visitor comment</title>
  <link rel="stylesheet" type="text/css" href="visitor.css">
</head>

<body>
  <div class="container">
    <h2>Leave Us a Comment</h2>
    <form onsubmit="submithandler(event)">
      <textarea id="text1" placeholder="Add Your Comment"></textarea>
      <div class="btn">
        <button onclick="fn1()" id="btn1">Comment</button>
        <!-- <button>Cancel</button> -->
      </div>
    </form>
  </div>
  <ul id="result"></ul>
  <script type="visitor.js"></script>
</body>

</html>

Answer 3

Answer №2

Here is an alternative JavaScript approach:

const form = document.forms[0];
const textarea = document.getElementById('text1');
const output = document.getElementById('output');

form.onsubmit = () => {
   output.innerHTML = '<li>' + textarea.value + '</li>';
   return false;
}

Answer 4

Here is an alternative JavaScript approach:

const form = document.forms[0];
const textarea = document.getElementById('text1');
const output = document.getElementById('output');

form.onsubmit = () => {
   output.innerHTML = '<li>' + textarea.value + '</li>';
   return false;
}

What is the method for displaying the value of a textarea?

Answer №1

Answer №2

Similar questions

Combining ng-repeat with the float property set to left

Guide on how to execute jasmine tests coded in TypeScript for Node.js applications

Received a 502 Bad Gateway Error message following a 2-minute wait for the webpage to load

The JavaScript-set value in a form field is not being transmitted to the PHP script within the $_POST array

Combine Two Values within Model for Dropdown Menu

Aligning angular bootstrap modal window in the center vertically

What is the process for utilizing the TypeScript compiler with nodejs?

Is there a way to temporarily halt a jQuery animation for 2 seconds before automatically resuming it, without relying on mouse-over or mouse-out triggers?

Tips for effectively exchanging information among angular services

Hide/Show overflow causing a disruption in my perspective

Ways to ensure a form label is accessible via keyboard navigation

Component loader with dynamic rendering for multiple components

Ensure that the GraphQL field "x" with type "[User]" includes a selection of subfields. Perhaps you intended to specify "x{ ... }" instead

"Troubleshooting: Jquery Draggable Function Fails to Execute

Using jQuery, you can submit a form easily

Express.js: Initial Request Fails to Retrieve Set Cookie

Enhancing User Experience with Load Indicator during State Changes in React Native

The functionality of Bootstrap pagination is incompatible with the angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js library

Can you clarify the meaning of 'this' in an AngularJS controller?

Inform jQuery that the draggable element is in the process of being dragged dynamically