Question

我正在尝试使用javascript将用户添加到列表中，我不知道为什么我的代码无效。

这是我的代码。

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>

Answer 1

您需要正确处理表单提交。而不是按钮点击事件，你最好听onsubmit表格事件：

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

从函数中你需要返回false来阻止表单提交：

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

演示：http://jsfiddle.net/8846u/

另请注意，制作按钮类型button标记也可以，但最佳做法实际上是type="submit"。它提供的好处是您可以使用Enter键提交表单，这是一种很好且一致的表单行为。

Answer 2

试试这个

<强> 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

Answer 3

该按钮将提交表单，将按钮类型更改为button将修复它：

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

使用javascript将用户添加到列表中

3 个答案:

演示：http://jsfiddle.net/8846u/