Getting data from the HTML form into JavaScript

Question

I am trying to get the values from the form inputs once you click submit into variables in JavaScript.

However I don't seem to be having much luck as the console log just shows the variables as empty.

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;

EDIT It was because I needed to remove () on addUser and also add return false to the addUser function at the bottom.

why is your script outside the head and body tags? move it just before the end `body` tag. — karthikr, Oct 13 '14 at 14:46

score 2 · Accepted Answer · answered Oct 13 '14 at 14:51

2

In

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

This will set the onsubmit equal to undefined because addUser returns nothing. To get the function addUser as the onsubmit function use this instead.

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(){
    ...
}

answered Oct 13 '14 at 14:51

Joseph Dailey

4,735
2
15
18

1

Thanks :) That was one of the problems! It seems I also had to have 'returns false' at the end of the function too any idea why that is? EDIT: Often, in event handlers, such as onsubmit, returning false is a way to tell the event to not actually fire. So, say, in the onsubmit case, this would mean that the form is not submitted. – Adam91Holt Oct 13 '14 at 15:11

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

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

Hope it helps!

edited May 23 '17 at 11:57

Community

1
1

answered Oct 13 '14 at 14:58

Hatjhie

1,366
2
13
27

Getting data from the HTML form into JavaScript

2 Answers2