Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Help Form Field GetElementById

    Hi guys

    I am making a simple Form Field
    But depending on the text length I want to show different content below the form.


    If text input length = 6 --> I want to show "div1" and hide "div2"

    If text input length = 9 --> I want to show "div2" and hide "div1"

    I made alot searches and it seems that to solve this problem I can use javascript GetElementById("id") and I also saw I have to use display 'block' and 'none'.

    How is the code and how I make it work with the html form?

    Any suggestions - Help please

  • #2
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Hope this helps.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script type="text/javascript">
    function swapBox()
    {
    	var userInput = document.getElementById("userInput").value.length;
    	var div1 = document.getElementById("div1");
    	var div2 = document.getElementById("div2");
    	if(userInput == "6")
    	{
    		div1.style.display="block";
    		div2.style.display="none";
    	}
    	else
    	{
    		if(userInput >= "9")
    		{
    			div1.style.display="none";
    			div2.style.display="block";
    		}
    		else
    		{
    			div1.style.display="none";
    			div2.style.display="none";			
    		}
    	}
    }
    </script>
    
    </head>
    
    <body>
    <input type="text" id="userInput" onkeyup="swapBox()" />
    <div id="div1" style="display:none;"><h1>Box 1</h1></div>
    <div id="div2" style="display:none;"><h1>Box 2</h1></div>
    </body>
    </html>

  • Users who have thanked ubh for this post:

    Nicky2980 (01-23-2009)

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks Ubh

    That was exactly what i ment
    Really really thanks man :-)

    Little question now,
    If I want to fine adjust it:

    After i type the 6th letter it shall keep showing "div1" and hide "div2" untill the 9th letter has been entered.

    Is it just a small modification in the code?

  • #4
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Hi Nicky2980,

    Yep its simple fix to our first if statement. We must add a "an" to our conditional statement for our character length of six. change the code to this.
    Code:
    function swapBox()
    {
    	var userInput = document.getElementById("userInput").value.length;
    
    	var div1 = document.getElementById("div1");
    	var div2 = document.getElementById("div2");
    	if(userInput>"5" && userInput<"9")
    	{
    		div1.style.display="block";
    		div2.style.display="none";
    	}
    	else
    	{
    		if(userInput >= "9")
    		{
    			div1.style.display="none";
    			div2.style.display="block";
    		}
    		else
    		{
    			div1.style.display="none";
    			div2.style.display="none";			
    		}
    	}
    }
    JavaScript is actually really fun once you get it down. There is just something about being able to manipulate document objects via client side that screams "hey what ever you can imagine can be done".

    So on that note I totally recommend ya to read as many DOM Scripting tutorials you can find out here on the net. DOM Scripting is Document Object Modeling Scripting or another words a more strict and standardized version of JavaScript recommended by W3C. Regular JavaScript there is over a hundred different ways to skin a cat where as DOM there might be only one or two recommended ways. So I guess what I am trying to say is...

    If you want to learn JavaScript start with DOM Scripting and you will become a pro in no time at all!!


    Take it easy man.

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ah alright I understand this now that I only have to change to my conditional statements, well its works very nice and im really happy man!

    Yes I like the functions which javascript provides and thanks for your recommendation, i'll proberly soon gonna read more about this DOM scripting. It sounds awesome.

    Im gonna notice your nickname cause you're a nice guy!

    Maybe I have some more questions so hope I can ask you :-)

    Cu and much thanks ubh


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •