CODEWITHSUNDEEP
javascriptfunctiontextbox
Xochi
Xochi

Reputation: 59

Input text form value from HTML into Javascript function

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.

Upvotes: 1

Views: 14830

Answers (4)

monika mevenkamp
monika mevenkamp

Reputation: 637

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>

Upvotes: 0

Vinay
Vinay

Reputation: 6879

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.

Upvotes: 1

DavidB
DavidB

Reputation: 2596

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...");

            }
        }

Upvotes: 0

David Hellsing
David Hellsing

Reputation: 108520

Put this line:

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

Inside the findColor function:

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

Upvotes: 4

Related Questions