Menu
Greetings.
I’m so glad to find this form, perhaps someone can help. As I’m learning Javascript on my own, it’s taken me a while now just to figure out what the problem with this code is. I’ve finally pinpointed the cause of the problem, and have tried many different things, but just can’t figure out a solution.
The form has hidden divs, selected by radio through a loop. The loop also has a snippet to clear the text fields on a “de-selected” div should someone go back and pick a different radio (obviously for db reasons the fields need to be cleared).
Here’s a stripped version of the code..at the bottom I’ll explain the problem:
[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>
<script type=”text/javascript”>
function onclickpet(ac){
document.getElementById(“dog0”).style.display = “none”;
document.getElementById(“dog1”).style.display = “none”;
document.getElementById(“dog2”).style.display = “none”;
document.forms[0].dog[0].checked = false;
document.forms[0].dog[1].checked = false;
document.forms[0].dog[2].checked = false;
var pick = ac.value;
for ( var c = 0; c < 999999; ++c ){
var div = document.getElementById(“pet”+c);
if ( div == null ) return;
if ( c == pick ){
div.style.display = “block”;
} else {
div.style.display = “none”;
[COLOR=”Red”]var fill = div.getElementsByTagName(“input”);
for ( var x = 0; x < fill.length; ++x ){
fill[x].value = “”;[/COLOR]
}
}
}
}
function onclickdog(ac){
var pick = ac.value;
for ( var c = 0; c < 999999; ++c ){
var div = document.getElementById(“dog”+c);
if ( div == null ) return;
if ( c == pick ){
div.style.display = “block”;
} else {
div.style.display = “none”;
var fill = div.getElementsByTagName(“input”);
for ( var x = 0; x < fill.length; ++x ){
fill[x].value = “”;
}
}
}
}
</script>
</head>
<body>
<form action=”insert.php” method=”post”>
<div>
<p>Please choose pet:
<input type=”radio” name=”pet” value=”0″ onClick=”onclickpet(this)”>Cat
<input type=”radio” name=”pet” value=”1″ onClick=”onclickpet(this)”>Bird
<input type=”radio” name=”pet” value=”2″ onClick=”onclickpet(this)”>Dog</p>
</div>
<div id=”pet0″ style=”display:none”>
<p> Cat’s Name:
<input type=”text” name=”cat_1″>
<input type=”text” name=”cat_2″> </p>
</div>
<div id=”pet1″ style=”display:none”>
<p> Bird’s Names.
<input type=”text” name=”bird_1″>
<input type=”text” name=”bird_2″></p>
</div>
<div id=”pet2″ style=”display:none”>
<p>Dog Types:
<input type=”radio” name=”dog” value=”0″ onClick=”onclickdog(this)”>Rottweiller
<input type=”radio” name=”dog” value=”1″ onClick=”onclickdog(this)”>German Shepard
<input type=”radio” name=”dog” value=”2″ onClick=”onclickdog(this)”>Great Dane</p>
</div>
<div id=”dog0″ style=”display:none”>
<p> Rottweiller’s Names.
<input type=”text” name=”rott_1″>
<input type=”text” name=”rott_2″></p>
</div>
<div id=”dog1″ style=”display:none”>
<p>Shepard’s Names.
<input type=”text” name=”shep_1″>
<input type=”text” name=”shep_1″></p>
</div>
<div id=”dog2″ style=”display:none”>
<p>Great Dane’s Names.
<input type=”text” name=”dane_1″>
<input type=”text” name=”dane_1″></p>
</div>
</form>
</body>
As you see there are “top level radios” for ‘animal types’…cats, birds, dogs.
If you were to choose cats or birds FIRST, then the “bottom level radios” (for dog types..rotts, great danes, shepards) will freeze to where you can only choose great danes.
The problem, I believe, is in the ‘clear text area snippet’ that I highlighted in red. What’s happening is when you select birds or cats first, you are also triggering the ‘order’ to clear ALL text fields in the ENTIRE form (and thereby screwing up the second loop). div.getElementsByTagName(“input”) <<this here.
I’ve tried giving the text areas an ID and using document.getElementByID(“id”) instead, but to no avail. I may be doing it wrong. I’ve also tried various ‘if’ and ‘for’ statements but, in retrospect, I don’t think that’s a good solution because on the full version of the form, every selection (birds, cats, dogs) is going to have further nested radios. I’ve tried using drop downs as well, but doesn’t make a difference as they are all ‘onclick’ evens.
Any ideas or help with this is greatly appreciated.