Adding users to the list using javascript

Question

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>

possible duplicate of jQuery: how to add <li> in an existing <ul>? — zaf
– zaf, Commented Apr 3, 2014 at 4:53
@user3282116 In that case, I will remove the query tag for you. — zaf
– zaf, Commented Apr 3, 2014 at 5:34

dfsq · Accepted Answer · 2014-04-03 05:07:54Z

2

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.net/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.

edited Apr 3, 2014 at 5:07

answered Apr 3, 2014 at 4:59

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

3 Comments

user3282116 Over a year ago

How to validate the email field using ajax?

dfsq Over a year ago

I would recommend to ask it as a separate question, it's too broad to answer it in comments.

user3282116 Over a year ago

here is the link stackoverflow.com/questions/22828368/…

Kiranramchandran · Accepted Answer · 2014-04-03 05:05:19Z

1

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

edited Apr 3, 2014 at 5:05

answered Apr 3, 2014 at 4:56

Kiranramchandran

2,09416 silver badges30 bronze badges

Comments

Iqbal Fauzi · Accepted Answer · 2014-04-03 05:00:28Z

0

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

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

answered Apr 3, 2014 at 5:00

Iqbal Fauzi

1,57111 silver badges12 bronze badges

Collectives™ on Stack Overflow

Adding users to the list using javascript

3 Answers 3

Demo: http://jsfiddle.net/8846u/

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Demo: http://jsfiddle.net/8846u/

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related