[RESOLVED] showing and hiding some div

[vin_akleh]

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" 
						onfocus="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

[holyhttp]

The select field calls the Show function only when it gains the focus. Afterwards even when the selection (option) changes nothing would happen unless the focus is moved to another field then back again.
I would suggest you use the onchange=Show(.....)" instead. You can then have a first option such as <option value="" selected>Make a Selection</option> selected by default.
That would invite the use to make a selection and in the process have the field trigger the focus event to call the show function.

Inside the Show function you can add a condition:

function Show (titleImg){
// the id of the content element from the id of the title element
if(titleImg!=""){
var contentID = titleImg.id.replace (/title/, "content");
var contentDiv = document.getElementById (contentID);
contentDiv.style.display = "block";
}
else {
alert("Please make a selection");
}
return false;
}

[vin_akleh]

i have tried them all as i said before "here is doesn't do nothing i have tried onblur onfocus onchange onselect..."

[Kor]

Some errors which make impossible for us to understand what you intend to do:

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;
}

your passed variable titleImg is a string (as it is the reference of the select's value). Now how can a string have an id? Furthermore, the RegExp looks like /title/, but i see no "title" string within your elements ids, nor do I understand why do you want to replace that with the string "content", which is also not to be found...

[vin_akleh]

this same function i have used it also for swapping an image also, but so i have tried any thing that is related to that, but when ever i delete this line "var contentID = titleImg.id.replace (/title/, "content");" the function just wont work!!!
here it is at it was before

function ToggleMaktoba (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);
	
	if (contentDiv.style.display == "none") {
		titleImg.src = "images/collapse.gif";
		contentDiv.style.display = "block";
	}
	else {
		titleImg.src = "images/expand.gif";
		contentDiv.style.display = "none";
	}

	return false;
}

[Kor]

Do you know JavaScript? I am afraid that you have copied those functions from another application and now you try to stick them somehow to your document. If you have no idea about what is going on, we will not be able to help you, as we have no common language, thus we can not understand one each other.

[vin_akleh]

Do you know JavaScript? I am afraid that you have copied those functions from another application and now you try to stick them somehow to your document. If you have no idea about what is going on, we will not be able to help you, as we have no common language, thus we can not understand one each other.

i do know javascript but i am not the best at it
and this function i have used it before, i even modified it and it worked on a radio button but it never seamed to work on select option

[holyhttp]

As Kor mentioned there are things in your functions that we cannot make sense of. We can only take your word for it that they work and obviously they are not in the current context.

When you are trying to solve a Javascript function taking its variable value from your HTML page, use the alert(..) to echo the input variables and see if the correct values are provided.

As I said when expecting the using selection to trigger an even from the "select" HTML element, use the "onchange=...." instead. The onfocus only works once when the field actually get the focus.


Again, use the "alert()" function inside each function to try finding the source of the issue.

[vin_akleh]

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>

[holyhttp]

function HideAllDivs(){
var divs=Array('highSchoolsDiv', 'Inner");

for(i=0; i<divs.length; i++){
document.getElementById(divs[i]).style.display="none";
}

}


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

[vin_akleh]

this is what i have done to it

function HideAllDivs(){
	var divs=Array('hsd', 'edu');
	for(i=0; i<divs.length; i++) {
		document.getElementById(divs[i]).style.display="none";
	}
}

function ShowHide (parameter){
	HideAllDivs();
	if (parameter == 'edu'){
		var hsd = document.getElementById ('hsd');
		if (hsd) {
			hsd.style.display = "block";
		}
	}
	var contentDiv = document.getElementById (parameter);
	if (contentDiv) {
		contentDiv.style.display = "block";
	}
	else {
		contentDiv.style.display = "none";
	}
	return false;
}