Question

在点击提交到JavaScript中的变量时，我试图从表单输入中获取值。

但是我似乎没有太多运气，因为控制台日志只是将变量显示为空。

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

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;

编辑这是因为我需要在addUser上删除（）并将return false添加到底部的addUser函数中。

Answer 1

在

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

这会将onsubmit设置为undefined，因为addUser不返回任何内容。要获得函数addUser作为onsubmit函数，请改用它。

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

你试图传递函数而不是它的返回。

另外，当我制作将要传递或设定的功能时，我觉得写这些功能更合理：

var addUser = function(){
    ...
}

Answer 2

为了使您的功能正常工作，您可能希望这样做：

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

您可以参考以下帖子获取进一步说明：

Timing of button.onclick execution

希望它有所帮助！

将HTML表单中的数据导入JavaScript

2 个答案: