Search code examples
javascriptarraysforms

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>

Solution

  • 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();
});