How to transfer data from an HTML form to a JavaScript function?

Question

I'm trying to make a form which accepts values from the user and then passes those values to a JS function in the same file for some calculations. I'm just trying to print the values to the console right now, but I keep getting the error "Object #<HTMLDocument> has no method 'getElementByID'". Here is the code:

<!DOCTYPE html>
<html>
<body>

<form action="javascript:formHandler();" method="get">
    <h1 align="center">Set the parameters you would like to visualize</h1>

    Center Frequency: <input type="text" name="cf" id="cf"><br>
    Bandwidth: <input type="text" name="bw" id="bw"><br>
    Number of Bins: <input type="text" name="bins" id="bins"><br>
    Number of Values to be Visualized: <input type="text" name="values" id="values"><br>
    <input type="submit" value="Submit">
</form>
<script>


    function formHandler()
    {
            console.log(document.getElementByID("cf")); // This is where I'm getting the error
    }

</script>
</body>
</html>

what does it mean transfer data from an HTML form to a JavaScript function ? — Ravi
– Ravi, Commented Aug 2, 2013 at 16:38
I'm trying to send the center frequency, bandwidth, bins, and values to the JavaScript function. I want to log the center frequency to the console for now. Sorry for the bad phrasing. — rafafan2010
– rafafan2010, Commented Aug 2, 2013 at 16:41
I think, you are trying to retrieve textbox value when function called, is it ? — Ravi
– Ravi, Commented Aug 2, 2013 at 16:42

Antti Haapala · Accepted Answer · 2013-08-02 18:29:25Z

2

your document.getElementByID should have a lowercase d at the end and you should also add .value, like so

document.getElementById("id").value

to get the value of whats being pass or typed

edited Aug 2, 2013 at 18:29

Antti Haapala

135k23 gold badges297 silver badges349 bronze badges

answered Aug 2, 2013 at 16:43

Moises Hidalgo

1335 bronze badges

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

4 Comments

rafafan2010 Over a year ago

I tried what you suggested in combination with what jWeaver suggested, and it works, but the value only appears in the console for a split-second. Is that supposed to happen?

Moises Hidalgo Over a year ago

your form is submitting so the page is being reload. in your form add this action="javascript:formHandler(); return false;"

rafafan2010 Over a year ago

What if I wanted to store the value in a variable and not have the value disappear once the page reloads?

Moises Hidalgo Over a year ago

once the page reloads everything resets, that includes variables. if you wanna save the values that are passed or type i suggest using a database or passing them to global variables like POST or GET then grabbing it again when the page loads

Harry · Accepted Answer · 2013-08-02 16:39:18Z

2

There is a typo error. It should be getElementById and not getElementByID.

You can print the value to console as below:

console.log(document.getElementById("cf").value);

answered Aug 2, 2013 at 16:39

Harry

90.1k26 gold badges216 silver badges224 bronze badges

Comments

Ravi · Accepted Answer · 2013-08-02 16:44:29Z

1

Better if you do like this

<form action='somepage.html' OnSubmit="return formHandler();" method="get">
<h1 align="center">Set the parameters you would like to visualize</h1>

Center Frequency: <input type="text" name="cf" id="cf"><br>
Bandwidth: <input type="text" name="bw" id="bw"><br>
Number of Bins: <input type="text" name="bins" id="bins"><br>
Number of Values to be Visualized: <input type="text" name="values" id="values"><br>
<input type="submit" value="Submit">
</form>


<script type='text/javascript'>
function formHandler()
{
        console.log(document.getElementById("cf").value);
  return true;
}
</script>

answered Aug 2, 2013 at 16:44

Ravi

31.6k44 gold badges124 silver badges180 bronze badges

Collectives™ on Stack Overflow

How to transfer data from an HTML form to a JavaScript function?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related