Input text form value from HTML into Javascript function

javascript function textbox

13,594

Solution 1

Put this line:

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

Inside the findColor function:

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

Solution 2

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.

13,594

Author by

Xochi

Updated on June 04, 2022

Comments

Xochi about 2 years

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.

rtpHarry almost 11 years

that could work but defining onclick handlers inline is not a recommend practice
DavidB almost 11 years

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 almost 11 years

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 almost 11 years

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