dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: why does this not generate a list????

  1. #1
    Join Date
    Jun 2017
    Posts
    2

    why does this not generate a list????

    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;
    }

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,200
    1. Please use forum BBCode tags when posting any code
    2. <form> tags have a name not an ID, generally where DOM elements have a name attribute, the ID attribute is not required because using DOM addressing properly means you don't need to use getElementsById() to hook those elemnts because they are already referenced through DOM.
    3. <button onclick='return addUser();' type="submit">add user</button> <--- Wut?
    <input name="Submit" type="submit" value="add user"> as a button is what you need if your going to submit the form

    For example...
    HTML Code:
    function addUser( fm ){
    var list = document.getElementById('users'), 
    	username = fm.username.value, 
    	email = fm.email.value,
    	entry = document.createElement("li");
    
    	entry.appendChild(document.createTextNode(username + ' ' + email));
    	list.appendChild(entry);
    return false;
    }
    </script>
    </head>
    <body>
    <form name="myform" action="javascript:;" onsubmit="return addUser( this );">
    	<h2>Add a User:</h2>
    	<input id="username" type="text" name="username" placeholder="name">
    	<input id="email" type="email" name="email" placeholder="email">
    	<input name="Submit" type="submit" value="add user" >
    </form>
    
    
    <h2>UsersList:</h2>
    <ul id="users"></ul>
    I would suggest that you have the inputs zero'd after being added to the list ready for the next input
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jun 2017
    Posts
    2
    thanks for the reply but that still doesnt work

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,200
    Well there is something wrong with the way you have implemented it then because it works perfectly fine on my PC under a Google Browser.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles