Input text form value from HTML into Javascript function

Question

Beginner question, I am currently learning JS and I'm trying to write a function that will take a text input from a simple html form. I can't figure out how to pass the text input into the function. This is what I am currently trying:

<html>
    <body>
        <script type = "text/javascript">
        <!--

        var myColor = document.getElementById("textbox").value;


        function findColor(){
        switch(myColor){
            case "Blue":
                document.write("just like the sky!");
            break

            case "Red":
                document.write("Just like wine!");
            break
            default:
                document.write("Suit yourself then...");

            }
        }

        //-->
        </script>

        <form>
        Colour <input type="text" name="inputform" id="textbox" value="">
        <input type="submit" value="Submit" onclick="findColor();">
        </form>
    </body>
</html>

Thanks, any help appreciated.

David Hellsing · Accepted Answer · 2013-08-14 12:32:35Z

5

Put this line:

 var myColor = document.getElementById("textbox").value;

Inside the findColor function:

function findColor(){
    var myColor = document.getElementById("textbox").value;
    switch(myColor){ //...

answered Aug 14, 2013 at 12:32

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

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

Comments

Vinay · Accepted Answer · 2013-08-14 12:44:11Z

I'm with David's answer. You are using a form and you need to prevent default submission event like below by pasing a event parameter to the function as shown in the below code.

function findColor(e){ // e is a event parameter passed
        e.preventDefault();
        var myColor = document.getElementById("textbox").value;
        switch(myColor){
            case "Blue":
                document.write("just like the sky!");
            break

            case "Red":
                document.write("Just like wine!");
            break
            default:
                document.write("Suit yourself then...");

            }
            return false;
}

and in html,

<input type="submit" value="Submit" onclick="findColor(event);">

As you can see I'm passing event like this findColor(event) in html

And a suggestion :

read about the document.write here and see a demo here the author explained it very neatly as

The use of document.write where native DOM alternatives such as document.createElement are more appropriate. document.write has been grossly misused over the years and has quite a few disadvantages including that if it's executed after the page has been loaded it can actually overwrite the page we're on, whilst document.createElement does not. We can see here for a live example of this in action. It also doesn't work with XHTML which is another reason opting for more DOM-friendly methods such as document.createElement is favorable.

DavidB · Accepted Answer · 2013-08-14 12:33:52Z

0

Or to pass it to the function do this:

<input type="submit" value="Submit" onclick="findColor('Blue');">

 function findColor(myColor){
        switch(myColor){
            case "Blue":
                document.write("just like the sky!");
            break

            case "Red":
                document.write("Just like wine!");
            break
            default:
                document.write("Suit yourself then...");

            }
        }

answered Aug 14, 2013 at 12:33

DavidB

2,5973 gold badges35 silver badges66 bronze badges

4 Comments

rtpHarry Over a year ago

that could work but defining onclick handlers inline is not a recommend practice

DavidB Over a year ago

This would work, its an example of how to pass something to a function, which was the question. Its an alternative to the other answers with the intention of helping a JavaScript beginner.

rtpHarry Over a year ago

not trying to ruffle your feathers :) I changed it from would to could work as I wasnt sure about hardcoding the onclick value. If I was going to post this sample I would do it as onclick="findColor(document.getElementById('textbox').value);" so it worked based on the input. But also I wouldn't use onclick at all . But also I would use jquery so that will probably upset people anyway haha

DavidB Over a year ago

No worries, your way is better, and Andrews is even better, it was just a simply example of how to pass data to a function. Jquery is deffo better

monika mevenkamp · Accepted Answer · 2013-08-14 13:30:06Z

when the browser reads your html page it interprets the javascript section thus defining your findColor function and executing the line

var myColor = document.getElementById("textbox").value;

Therefor myColor receives the initial value of your textbox element. By the time the page is fully loaded and you enter a value in the textbox the myColor assignment is already done. To make sure that the assignment is done at the right time, after clicking submit, aka when the findColor functiom is called, you have the two options mentioned above: Make the assignemt the first statement in your findColor function OR make it a parameter to the findColor function

There is a second flaw in this example. A form's submit triggers reloading of an HTML page. Therefore you never see the result of your findColor function. A better way to play with Javascript is to tie functions to buttons. See the revised html below.

I trust you have seen the w3school JavaScript tutorials http://www.w3schools.com/js/. Have a look at http://www.netmagazine.com/tutorials/javascript-debugging-beginners.

<html>
    <body>
        <script type = "text/javascript">
        function findColor(myColor){
        output = document.getElementById('output'); 
        switch(myColor){
            case "Blue":
                output.innerHTML = "Just like the sky"; 
                break
            case "Red":
                output.innerHTML = "Just like the wine"; 
                break
            default:
                output.innerHTML ="Suit yourself then...";
            }
        }
        </script>

        <form>
        Colour <input type="text" name="inputform" id="textbox" value="">
        </form> 

        <button type="button" onclick="findColor(document.getElementById('textbox').value);"> FindColor </button>
        </form>

        <div id="output"> what I think of this color </div>
    </body>
</html>

Collectives™ on Stack Overflow

Input text form value from HTML into Javascript function

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related