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>

@user3282116 In that case, I will remove the query tag for you. — zaf, Apr 03 '14 at 05:34
And also http://stackoverflow.com/questions/17773938/add-a-list-item-through-javascript — zaf, Apr 03 '14 at 05:35

dfsq · Accepted Answer · 2014-04-03T05:07:54.737

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 03 '14 at 05:07

answered Apr 03 '14 at 04:59

dfsq

191,768
25
236
258

How to validate the email field using ajax? – user3282116 Apr 03 '14 at 05:03
I would recommend to ask it as a separate question, it's too broad to answer it in comments. – dfsq Apr 03 '14 at 05:04
here is the link http://stackoverflow.com/questions/22828368/validate-email-field-in-the-form-while-adding-to-the-list – user3282116 Apr 03 '14 at 05:13

Kiranramchandran · Answer 2 · 2014-04-03T05:05:19.660

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

score 0 · Answer 3 · answered Apr 03 '14 at 05:00

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 03 '14 at 05:00

Iqbal Fauzi

1,561
11
12

Adding users to the list using javascript

3 Answers3

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