showing and hiding some div

[vin23akleh]

i am having some problem showing and hiding some div
i want to show the div with the id="universitiesDiv" on one point and the div id="highSchoolsDiv" on another depending on the user choice of selected option.

function Show (titleImg){
		// the id of the content element from the id of the title element
	var contentID = titleImg.id.replace (/title/, "content");
	var contentDiv = document.getElementById (contentID);
		contentDiv.style.display = "block";

	return false;
}

function Hide (titleImg){
		// the id of the content element from the id of the title element
	var contentID = titleImg.id.replace (/title/, "content");
	var contentDiv = document.getElementById (contentID);

		contentDiv.style.display = "none";

	return false;
}

the functions work fine i have tested them on input type="checkbox" and they work fine

<select name="education" id="education" 
						onchange="Show(this.options[this.selectedIndex].value);">
						<option selected value="00">-?????? ????????-</option>
						<option value="highSchoolsDiv">????? ??????</option>
						<option value="universitiesDiv"> ???? </option>
						<option value="universitiesDiv">???? ???????????</option>
						<option value="universitiesDiv">???? ????</option>
						<option value="universitiesDiv">??????? / ?? ??? ?????????</option>
						<option value="07">?????? ???? ???</option>
						</select>
						</span>
						</div> 
						</td></tr></table>
					</div> 
					 
					<div> 
						<div class="Left"></div>
						<table class="step2" ><tr><td>
						<div class="Right"> 
							<div class="Inner" id="Inner"> 
								<div id="universitiesDiv" class="Row innerError" style="display:none;"> 
									<div class="Left">
									<label for="universities">??????? / ??????</label></div> 
									<div class="Right"> 
									<input  type="text" name="universities" id="universities" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_universities();" onblur="blurInput(this); validate_JoinPersonalInfoForm_universities();" size="55"/> 

 
									</div> 
									 
									 </td></tr><tr><td>
								</div> 
								 
								<div id="highSchoolsDiv" class="Row innerError" style="display:none;"> 
									<div class="Left">
									<label for="high_schools">??????? ????????</label></div> 
									<div class="Right"> 
										<input  type="text" name="high_schools" id="high_schools" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_high_schools();" onblur="blurInput(this); validate_JoinPersonalInfoForm_high_schools();" size="55"/> 
 
									</div> 
														
									 
								</div> 
							</div> 
						</div> 
						</td></tr></table>	
					</div>

here is doesn't do nothing i have tried onblur onfocus onchange onselect everything i even tried then in side the option <option onselect... !!!!!
anyone can help me, that would be great
thanks

 

[tsuji]

>var contentID = titleImg.id.replace (/title/, "content");

[0] First, you don't have the slimest chance to have "title" particle appearing in any id. So the replace part is pointless.

[1] Then, the main thing is titleImg is passed in as a simple string (not a form element), hence, .id etc is beyond the point and is a runtime error. It is already the select-one element's value which is either HighSchoolsDiv or universitiesDiv.

[2] And then the possible "07" being passed and nowhere(? or not shown anywhere) you have a tag with id called "07", so chances are it would be null. You have to control that.

[2.1] An id having a value "07" is no good, better have it started with alphabet or underscore: you would be on the safe-side of the thing.

[3][tt]
function Show (titleImg){
// the id of the content element from the id of the title element
[red]//[/red]var contentID = titleImg.id.replace (/title/, "content");
var contentDiv = document.getElementById ([red]titleImg[/red]);
[red]if (contentDiv) {[/red]
contentDiv.style.display = "block";
[red]}[/red]
return false;
}
[/tt]
[3.1] Hide() function is nowhere called in the excerpt. If it is called in the same fashion as the Show() function with the string being passed rather than some form element, the correct is the same as shown in the Show().

 

[vin23akleh]

this is how i got it to work, but i cant seam to make it hide, i want the div show up and hide depending on the user selection for instance if the user chose the value="highSchoolsDiv" the div with the id="highSchoolsDiv" should be shown, and hidden if not
if the user chose the value="Inner"" the div with the id="Inner" should be shown, and hidden if not
the client went to school and university or went to school only.
and another thing the "div id="highSchoolsDiv"" is not hidden on page load which it should be since it is inside the "div id="Inner" style="display:none;""
which is hidden on load!!

function ShowHide (titleImg){
    var contentDiv = document.getElementById (titleImg);
    if (contentDiv) {
        contentDiv.style.display = "block";
    }
	else
	{
		contentDiv.style.display = "none";
	}
    return false;
}

<div class="Left"><label for="education">???????</label> <span class="Required">*</span></div></td><td> 
<div class="Right"><span class="selectWrapper">
<select name="education" id="education" 
onchange="ShowHide(this.options[this.selectedIndex].value);">
<option selected value="">-?????? ????????-</option>
<option value="highSchoolsDiv">????? ??????</option>
<option value="Inner"> ???? </option>
<option value="Inner">???? ???????????</option>
<option value="Inner">???? ????</option>
<option value="Inner">??????? / ?? ??? ?????????</option>
<option value="">?????? ???? ???</option>
</select>
</span>
</div> 
</td></tr></table>
</div>
<div> 
<table class="step2"><tr><td>
<div class="Right"> 
<div id="Inner" style="display:none;"> 
<div id="universitiesDiv" class="Row innerError"> 
<div class="Left">
<label for="universities">??????? / ??????</label></div> 
<div class="Right"> 
<input  type="text" name="universities" id="universities" class="text" autocomplete="off"  size="55"/> 
</div> 
</td></tr><tr><td>
</div> 
<div id="highSchoolsDiv" class="Row innerError"> 
<div class="Left">	<label for="high_schools">??????? ????????</label></div> 
<div class="Right"> 
<input  type="text" name="high_schools" id="high_schools" class="text" autocomplete="off" size="55"/> 
</div>
</div> 
</div> 
</div> 
</td></tr>
</table>