How to show the entered items in a list inside text area

Question

I want to make an html form which asks the user to input values in a text field and click "submit" button. After the user clicks the "submit" button, the value should be appended to a list of all previously entered values. The user should be able to select the entered item to edit or remove it. Something that should look similar to this:

I tried to use this code. The item gets added to the list but not inside a box in clickable format as I showed in the image before.

var button = document.getElementById("submit-button");
var text = document.getElementById("text-field");
var list=document.getElementById("list");
button.addEventListener('click', function (event) {
var node = document.createElement("LI");
var textnode = document.createTextNode(text.value);
    node.appendChild(textnode);

//to append the item
list.appendChild(node);}
    , false);

EDIT: Here is the html code:

<html>
<head> 
</head>

  <body>    
  <form> 
      Enter URL: <br>
      <input type="text" id="text-field">
      <br> 
      <button id="submit-button">Submit</button>
  </form>
  <ul id="list"></ul>
  <script src="myscript.js"> </script>
  </body>
</html>

Thanks. I did added .value. But after I submit the button, no list appears. The list does not exist in my page. — user7945230, May 18 '17 at 20:43
Add `type="button"` to your `button` element or call `event.preventDefault()` from your event listener. See http://stackoverflow.com/q/932653/215552 for more information. — Heretic Monkey, May 18 '17 at 20:50
@Mike McCaughan I added `event.preventDefault()`, this did not help in showing the list in the HTML page. — user7945230, May 19 '17 at 07:51
but in your html snippet there is no dom element with list id attribute — marmeladze, May 19 '17 at 08:11
@marmeladze I corrected it. Now I get a list item added but fixed list not like the image I posted where list items are shown inside a box and can be clicked and highlighted once clicked. — user7945230, May 19 '17 at 08:21

score 0 · Accepted Answer · answered May 19 '17 at 08:50

You must use select, not ul tag:

var button = document.getElementById("submit-button");
var text   = document.getElementById("text-field");
var select = document.getElementById("select");

button.addEventListener('click', function (event) {
  event.preventDefault();
  
  if (!text.value) {
    return false;
  }
  
  var textnode = document.createTextNode(text.value);
  var node = document.createElement("option");
  node.appendChild(textnode);

  //to append the item
  select.appendChild(node);
  text.value = '';
  
  return false;
});

#select {
  min-width: 300px;
  min-height: 100px;
}

<form> 
  Enter URL: <br>
  <input type="text" id="text-field">
  <br> 
  <button id="submit-button">Submit</button>
</form>
<br />
<select id="select" multiple="multiple">
</select>

How to show the entered items in a list inside text area

1 Answers1