Storing and returning input variable from HTML form in JavaScript

Question

I've been reading other questions and the suggestions I've tried haven't worked for me. I'm trying to have the user enter a number and have it returned in the form of a JS alert (for now). Here is my code:

HTML

<form id="form">
Enter your guess: <input id="guessbox" type="text" name="userguess">
<input id="submitbutton" type="submit" value="Submit">
</form>

JavaScript

var guess = document.getElementById("guessbox").value;
alert(guess);

I keep getting 'null' for the value of my input box and I want the value I enter to be turned into the variable "guess" upon clicking the submit button. I'm sure I'm just missing something basic here.

In the example I posted, I guess I don't... however I've tried writing a function with that JS code and I used onClick="thefunction()" on the submit button. I don't really know what to use other than that, which I apparently used incorrectly. — jblittle
– jblittle, Commented May 2, 2014 at 16:01

score 1 · Accepted Answer · 2018-03-02 20:53:28Z

1

You could try:

<form name="form" onSubmit="returnGuess()">
Enter your guess: <input id="guessbox" type="text" name="userguess">
<input id="submitbutton" type="submit" value="Submit">
</form>

Javascript:

function returnGuess(){
    var guess = document.forms["form"]["userguess"].value;
    alert(guess);
}

edited Mar 2, 2018 at 20:53

answered May 2, 2014 at 16:03

user3310334

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

3 Comments

jblittle Over a year ago

Fantastic. That solved it. So the document.forms.value method takes the form name and the input name within the form and returns the value of said input. Out of curiosity, what is the significance of closing the text input tag but not the submit button input tag?

Barmar Over a year ago

This answer doesn't explain why the original code didn't work. document.getElementById("guessbox") should be equivalent.

jblittle Over a year ago

I think it was onSubmit in the form that I was really missing. I had tried to use onClick on the submit button without success.

Collectives™ on Stack Overflow

Storing and returning input variable from HTML form in JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related