I am trying to add users to the list using javascript, I dont know why my code is not working.

Here is my code.

HMTL

<form id="myform">
    <h2>Add a User:</h2>
    <input id="username" type="text" name="username" placeholder="name">
    <input id="email" type="email" name="email" placeholder="email">
    <button onclick='addUser()' type="submit">add user</button>
</form>

<h2>UsersList:</h2>
<ul id="users"></ul>

JavaScript

<script>
    var list = document.getElementById('users');
    function addUser(){
        var username =document.getElementById('username').value;
        var email = document.getElementById('email').value;
        var entry = document.createElement('li');
        entry.appendChild(document.createTextNode(username + '' + email));
        list.appendChild(entry);
    }
</script>

I am trying to add users to the list using javascript, I dont know why my code is not working.

Here is my code.

HMTL

<form id="myform">
    <h2>Add a User:</h2>
    <input id="username" type="text" name="username" placeholder="name">
    <input id="email" type="email" name="email" placeholder="email">
    <button onclick='addUser()' type="submit">add user</button>
</form>

<h2>UsersList:</h2>
<ul id="users"></ul>

JavaScript

<script>
    var list = document.getElementById('users');
    function addUser(){
        var username =document.getElementById('username').value;
        var email = document.getElementById('email').value;
        var entry = document.createElement('li');
        entry.appendChild(document.createTextNode(username + '' + email));
        list.appendChild(entry);
    }
</script>

• javascript

• possible duplicate of jQuery: how to add <li> in an existing <ul>? – zaf Commented Apr 3, 2014 at 4:53
• Im trying to implement in pure js – user3282116 Commented Apr 3, 2014 at 4:55
• @user3282116 In that case, I will remove the query tag for you. – zaf Commented Apr 3, 2014 at 5:34
• And also stackoverflow./questions/17773938/… – zaf Commented Apr 3, 2014 at 5:35

3 Answers 3

You need to handle form submit properly. Instead of button click event you would better listen onsubmit form event:

<form id="myform" onsubmit="return addUser()">

And from the function you need to return false to prevent form submission:

function addUser(){
    var username = document.getElementById('username').value;
    var email = document.getElementById('email').value;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(username + ' ' + email));
    list.appendChild(entry);

    return false;
}

Demo: http://jsfiddle/8846u/

Also note that making a button type button tag would also work but the best practice is actually to have type="submit". Benefits it provides is that you can submit a form with Enter key which is nice and consistent form behavior.

Try This

HTML

<form id="myform">
<h2>Add a User:</h2>
<input id="username" type="text" name="username" placeholder="name">
<input id="email" type="email" name="email" placeholder="email">
 <button onclick='return addUser();' type="submit">add user</button>
</form>


<h2>UsersList:</h2>
<ul id="users"></ul>

JS

function addUser(){
    var list = document.getElementById('users');
var username =document.getElementById('username').value;
var email = document.getElementById('email').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(username + ' ' + email));
list.appendChild(entry);
    return false;
}

DEMO HERE

That button will submit the form, change the button type to button will fix it :

<button onclick='addUser()' type="button">add user</button>