Question 206372 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I need to display input items in an array inside paragraph but items disappear after submission and display

The goal is to add items into the input box and display them in the paragraph below it.
But page disappears after the items are displayed.
I need the page to stay the way it is and not disappear.
Bellow I included the css and the javascript inside the same HTML file because it is easier to copy-paste

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1{
color: Crimson;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
color: gray;
}
#sentence{
width:300px;
height: 200px;
border: 2px dashed darkred;
}
</style>
</head>
<body>

<h1>Show Room</h1>

<form onsubmit="memory()">
 
 <p>Add items to display bellow</p>
 
 <textarea id="box" name="box" rows="4" cols="50" placeholder="example: frame picture beach ..."></textarea>
 
 <input type="submit" value="Submit">

</form>
<h3>Display</h3>
<p id="sentence"></p>

<script>

var items = [];

function memory() {
  boxvalue = document.getElementById('box').value;
  items.push(boxvalue);  
   document.getElementById("sentence").innerHTML = items;
  return false;
}

</script>
</body>
</html>
Tags:

2

Answers


  1. 0

    If you want to use the return value from memory to stop the form from submitting, you need to explicitly return it in the onsubmit attribute.

    onsubmit="return memory()"

    However, it is better to use addEventListener and event.preventDefault() instead rather than inline event handlers.

    You can implement this like so:

    // remove the onsubmit attribute on the form first
document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    memory();
});
    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1{
color: Crimson;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
color: gray;
}
#sentence{
width:300px;
height: 200px;
border: 2px dashed darkred;
}
</style>
</head>
<body>

<h1>Show Room</h1>

<form onsubmit="memory()">
 
 <p>Add items to display bellow</p>
 
 <textarea id="box" name="box" rows="4" cols="50" placeholder="example: frame picture beach ..."></textarea>
 
 <input type="submit" value="Submit">

</form>
<h3>Display</h3>
<p id="sentence"></p>

<script>

var items = [];

function memory() {
  event.preventDefault();
  boxvalue = document.getElementById('box').value;
  items.push(boxvalue);  
   document.getElementById("sentence").innerHTML = items.toString();
}

</script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search