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
– karthikr, Commented Oct 13, 2014 at 14:46

Joseph Dailey · Accepted Answer · 2014-10-13 14:51:59Z

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, 2014 at 14:51

Joseph Dailey

4,9352 gold badges18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam91Holt Over a year ago

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.

Community · Accepted Answer · 2017-05-23 11:57:09Z

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, 2017 at 11:57

CommunityBot

11 silver badge

answered Oct 13, 2014 at 14:58

Hatjhie

1,3652 gold badges13 silver badges28 bronze badges

Collectives™ on Stack Overflow

Getting data from the HTML form into JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related