...

View Full Version : Help Form Field GetElementById



Nicky2980
01-22-2009, 11:56 PM
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 :confused:

ubh
01-23-2009, 01:45 AM
Hope this helps.


<!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>

Nicky2980
01-23-2009, 11:53 AM
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? :)

ubh
01-24-2009, 01:31 AM
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.


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.

Nicky2980
01-26-2009, 05:38 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum