将数据从HTML表单获取到JavaScript

Question

I am trying to get the values from the form inputs once you click submit into variables in JavaScript. 我试图从表单输入中获取值，方法是单击“提交到JavaScript中的变量”。

However I don't seem to be having much luck as the console log just shows the variables as empty. 但是我似乎不太幸运，因为控制台日志只是将变量显示为空。

HTML 的HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>Registration</title>
</head>
<body>
<fieldset><legend>Registration</legend>
<form action="#" method="post" id="theForm">
    <label for="username">Username<input type="text" name="username" id="username"></label>
    <label for="name">Name<input type="text" name="name" id="name"></label>
    <label for="email">Email<input type="email" name="email" id="email"></label>
    <label for="password">Password<input type="password" name="password" id="password"></label>
    <label for="age">Age<input type="number" name="age" id="age"></label>
    <input type="hidden" name="unique" id="unique">
    <input type="submit" value="Register!" id="submit">
</form>
</fieldset>

<div id="output"></div>

<script src="js/process.js"></script>    

</body>

</html>

JS JS

var output = document.getElementById('output');

function addUser() {
    'use strict';
    var username = document.getElementById('username');
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var password = document.getElementById('password');
    var age = document.getElementById('age');
    console.log(username.value);
    console.log(name.value);
    console.log(password.value);
}

// Initial setup:
function init() {
    'use strict';
    document.getElementById('theForm').onsubmit = addUser();
} // End of init() function.
//On window load call init function
window.onload = init;

EDIT It was because I needed to remove () on addUser and also add return false to the addUser function at the bottom. 编辑是因为我需要在addUser上删除（），还需要在底部的addUser函数中添加return false。

Answer 1

In 在

function init() {
    'use strict';
    document.getElementById('theForm').onsubmit = addUser();
}

This will set the onsubmit equal to undefined because addUser returns nothing. 这将把onsubmit设置为undefined，因为addUser不返回任何内容。 To get the function addUser as the onsubmit function use this instead. 要将函数addUser用作onsubmit函数，请改用此函数。

function init() {
    'use strict';
    document.getElementById('theForm').onsubmit = addUser;
}

You are trying to pass the function itself not the return of it. 您正在尝试传递函数本身而不是返回它。

Also, when I'm making functions that will be passed or set, I find it more reasonable to write them like this: 另外，当我创建将要传递或设置的函数时，我发现像这样编写它们更合理：

var addUser = function(){
    ...
}

Answer 2

In order to make your function working, you might want to do this: 为了使您的功能正常工作，您可能需要这样做：

   function init() {
        'use strict';
        document.getElementById('theForm').onsubmit = function () { addUser(); }
    }

You can refer to the post below for further explanation: 您可以参考下面的帖子以获取更多说明：

Timing of button.onclick execution button.onclick执行的时间

Hope it helps! 希望能帮助到你！

将数据从HTML表单获取到JavaScript

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-10-13 14:51:59

解决方案2
1 2014-10-13 14:58:16

将数据从HTML表单获取到JavaScript

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-10-13 14:51:59

解决方案2 1 2014-10-13 14:58:16

解决方案1
2 已采纳 2014-10-13 14:51:59

解决方案2
1 2014-10-13 14:58:16