CODEWITHSUNDEEP
javascripthtml
Jeremy Stone
Jeremy Stone

Reputation: 350

Add user input to list on button click in JavaScript

I'm trying to create an HTML form which takes the text from multiple textboxes (in this case, 3) and adds the content of each to a list in a separate div, as well as create a new object "employee", all via the click of a button. My goal is to imitate adding employees to a database, using an employee id, first name, and last name as variables. I am looking to accomplish this using pure javascript.

What I have so far is: 

<form>
  ID Number:
  <br>
  <input type="text" id="idNumber">
  <br>First name:
  <br>
  <input type="text" id="firstName">
  <br>Last name:
  <br>
  <input type="text" id="lastName">
</form>
<br>
<button type="submit" onclick="myFunction(list)">Submit</button>

<div id="container">
  <ul id="list"></ul>
</div>

In a separate JavaScript file:

function myFunction(list){
  var text = document.getElementById("idNumber","fName","lName").value; 
  var li = "<li>" + text + "</li>";
  document.getElementById("list").replaceChild(li);
}

When I debug my code it seems to be setting the values fine, but I receive no actual output of my list.

Upvotes: 0

Views: 11632

Answers (2)

Buzinas
Buzinas

Reputation: 11725

Your code is full of problems, look at the document.getElementById and Node.replaceChild docs.

I've created a version for you that we get all the input elements of your form (using querySelectorAll), and then we use Array.prototype.map to turn them into "<li>[value]</li>", and then Array.prototype.join to turn that array into a single string.

Then, we get that string and set the #list.innerHTML property. 

document.querySelector('button').addEventListener('click', function(e) {
  var form = document.querySelector('form'),
      list = document.getElementById('list');
  
  list.innerHTML = [].map.call(form.querySelectorAll('input'), function(el) {
    return '<li>' + el.value + '</li>';
  }).join('');
});
<form>
  ID Number:
  <br>
  <input type="text" id="idNumber">
  <br>First name:
  <br>
  <input type="text" id="firstName">
  <br>Last name:
  <br>
  <input type="text" id="lastName">
</form>
<br>
<button type="submit">Submit</button>

<div id="container">
  <ul id="list"></ul>
</div>

Upvotes: 1

Richard Hamilton
Richard Hamilton

Reputation: 26434

None of the input elements you selected had a class name. You can also do this with document.getElementById. Just add ids to all your form elements.

Your code should look something like this.

function myFunction(list){
    var text = "";
    var inputs = document.querySelectorAll("input[type=text]");
    for (var i = 0; i < inputs.length; i++) {
        text += inputs[i].value;
    }
    var li = document.createElement("li");
    var node = document.createTextNode(text);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);

}

http://jsfiddle.net/nb5h4o7o/3/

Your list wasn't being appended to because you weren't actually creating the elements. replaceChild should have been appendChild and you should have created a list element with document.createElement.

Upvotes: 2

Related Questions