Add user input to list on button click in JavaScript

Question

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.

document.getElementByClassName doesn’t exist and the document.getElementsByClassName function that you mean doesn’t work like that at all. The arguments you’re giving that function aren’t even class names. — Sebastian Simon
– Sebastian Simon, Commented Oct 7, 2015 at 23:37
to check if your code is wrong make the var li = "<li> sample text </li>" if that doesnt shows up a list, you are doing it wrong — ivan
– ivan, Commented Oct 7, 2015 at 23:39
If you are getting element by Id wouldn't you want to make sure you have an id in your inputs? you have it for the first input but not for the others. — Adam Buchanan Smith
– Adam Buchanan Smith, Commented Oct 7, 2015 at 23:46
@AdamBuchananSmith was trying to make it work using one variable at first, edited — Jeremy Stone
– Jeremy Stone, Commented Oct 7, 2015 at 23:50

Richard Hamilton · Accepted Answer · 2015-10-07 23:53:40Z

2

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.

edited Oct 7, 2015 at 23:53

answered Oct 7, 2015 at 23:48

Richard Hamilton

26.5k11 gold badges65 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeremy Stone Over a year ago

This accomplishes what I was looking for, clearly I've got some practicing to do. Thank you

Buzinas · Accepted Answer · 2015-10-07 23:56:28Z

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>

Collectives™ on Stack Overflow

Add user input to list on button click in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related