FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Javascript Add Element

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


moejoe
Hi,

i was wondering if there was a way to add an element (lets say a checkbox) into the page when there is a change in another element, lets say, a drop down box.

It'll probably use some CSS (visibility: none/block etc..)...

Thanks for your help!
Mosquito.Tyler
Well, I suppose you could do it a couple of ways, with or without CSS.

I figure both methods would be about the same in function, as well as in difficulty.

So, with javascript, you can run a function to test the selection of your dropdown box, and if the situation is true, you can show a checkbox.

I'm going to use pseudo-code because I don't have much time right now, but i might be able to actually construct a small tut for ya later.

Code:

<script>
function checkdrop(){
if(dropdownboxID.value = "option"){
DivContainingCheckBoxes-ID.className = "Show"
}
else
{
DivContainingCheckBoxes-ID.className = "Hide"
}
}
</script>

<body>
<dropdownboxcode  onBlur="checkdrop()">
<option>...</option>
<option>...</option>
<option>...</option>
<div class="Hide"><input type="checkbox" /></div>

</body>


Without CSS you can use the innerHTML property.

Code:

<script>
function checkdrop(){
if(dropdownboxID.value = "option"){
DivContainingCheckBoxes-ID.innerHTML = "<input type='checkbox' />"
}
else
{
DivContainingCheckBoxes-ID.innerHTML = ""
}
}
</script>

<body>
<dropdownboxcode  onBlur="checkdrop()">
<option>...</option>
<option>...</option>
<option>...</option>
<div class="Hide"><input type="checkbox" /></div>

</body>


It's late, I'm really tired, this prolly wont help you much. Tomorrow, I'll look into it.
alkutob
Thank you very much for the good scripts ...but I want to know how exactly can I use such scripts and .

If there is any example ..it will be appreciated.

Thanks again
moejoe
Hi

Thanks for the basic script.
I've modded it up so you can directly use it in W3 HTML editor =].

CLICK HERE and Paste code Below!

Code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test Page</title>
<script>
function checkdrop(){
if(document.all.dropdown.value == "option"){
document.getElementById("div").className = "Show"
}
else
{
document.getElementById("div").className = "Hide"
}
}
</script>
<style type="text/css">
.Hide {
display: none;
}
.Show {
display: block;
}
</style>
</head>


<body>
<select name="dropdown" onChange="checkdrop()">
<option>Select!</option>
<option value="option">appear!</option>
<option>Gone</option></select>
<div id="div" class="Hide"><input type="checkbox" name="C1" value="ON"></div>

<p>=] Thanks for the Basic Tutorial!</p>

</body>

</html>


If you need it with any other element im happy to help!
I love JS now lol.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.