show hide problems

[wbva]

Hi,
i am using this show/hide function

<script type="text/javascript"><!--
var lastDiv1 = "";
function showDiv1(divName) {
	// hide last div
	if (lastDiv1) {
		document.getElementById(lastDiv1).className = "hiddenDiv";
	}
	//if value of the box is not nothing and an object with that name exists, then change the class
	if (divName && document.getElementById(divName)) {
		document.getElementById(divName).className = "visibleDiv";
		lastDiv1 = divName;
	}
}
//-->

</script>

<style type="text/css" media="screen"><!--
.hiddenDiv {
	display: none;
	}
.visibleDiv {
	display: block;
	border: 1px grey solid;
	}

--></style>
</script>

<script type="text/javascript"><!--
var lastDiv2 = "";
function showDiv2(divName) {
	// hide last div
	if (lastDiv2) {
		document.getElementById(lastDiv2).className = "hiddenDiv";
	}
	//if value of the box is not nothing and an object with that name exists, then change the class
	if (divName && document.getElementById(divName)) {
		document.getElementById(divName).className = "visibleDiv";
		lastDiv2 = divName;
	}
}
//-->

</script>

<style type="text/css" media="screen"><!--
.hiddenDiv {
	display: none;
	}
.visibleDiv {
	display: block;
	border: 1px grey solid;
	}

--></style>
</script>

I have a drop down list with three choices, Yes, No and Not Applicable. For instance I select only Yes for the show/hide function then the date text box comes up...

Now i have added the "No" as well, for instance, when the user selects "NO", "Meeting Offered" drop down should come up. But my problem is now i have to do it for Not Applicable(NA) and it is not working?? In other words, when the user clicks on NA some "Meeting Offered" drop down box should come up,

can anybody can help please???

This is my form with the drop down box:

<select name="Skip_Level_Meeting" size="1" onchange="showDiv1(this.value);" >

                                                <option value="" >Choose One...</option >

                                                <option value="Yes" >Yes</option>

                                                <option value="No" >No</option>

                                                <option value="N/A">N/A (I have declined to take up this opportunity)

                                                </option>

                                    </select ><br>

            

            <p id="Yes" class="hiddenDiv">

                        

            <font size="2" face="Times New Roman">8)Date

          <input type="text" id="cal3" name="SLM_Date" value="<%=Request.Form("SLM_Date")%>" size="13" />

         <input type="image" name="submit10" img src="calender/calender.bmp" id="calb3" width="30" height="31" start="fileopen"></font>          <font face=" Times New Roman">

            <font size="2" face="Times New Roman">

          

          <script type="text/javascript">

            Calendar.setup({

              inputField    : "SLM_Date",

              button        : "calb3",

              align         : "Tr"

            });

          </script>

          

          

          

     <p id="No" class="hiddenDiv">

          <legend>&nbsp;</legend>

          9) Meeting Offered 

             

             <select name="SLM_Meeting_Offered" size="1" onchange="showDiv2(this.value);" >

                                                <option value="" >Choose One...</option >

                                                <option value="Yes 1 " >Yes</option>

                                                <option value="No 1 " >No</option>

                                    </select ><br>

                                    

                        

 

            

            <p id="Yes 1 " class="hiddenDiv">

            

            10</font><font face="Times New Roman" size="5"><font size="2" face="Times New Roman">) 

            Date offered 

            <input type="text" id="cal9" name="SLM_Date_Offered" value="<%=Request.Form("SLM_Date_Offered")%>" size="13" />

          <input type="image" name="submit11" img src="calender/calender.bmp" id="calb9" width="30" height="31" start="fileopen"></font>

          <script type="text/javascript">

            Calendar.setup({

              inputField    : "SLM_Date_Offered",

              button        : "calb9",

              align         : "Tr"

            });

          </script>

[Old Pedant]

You are asking to show the div with the id of "N/A" and of course there is NO SUCH div.

That is, your code is looking for

    <div id="N/A">

But that won't work in all browsers, anyway. IDs should be legit JavaScript names or MSIE will have problems.

Anyway, you just have to have a <DIV> with an ID that matches the VALUE= of the appropriate <OPTION>.

[wbva]

You are asking to show the div with the id of "N/A" and of course there is NO SUCH div.

That is, your code is looking for

    <div id="N/A">

But that won't work in all browsers, anyway. IDs should be legit JavaScript names or MSIE will have problems.

Anyway, you just have to have a <DIV> with an ID that matches the VALUE= of the appropriate <OPTION>.

Below is a basic mock up of what i want:

when the user selects Yes the date box comes up,
when the user selects No, the ANOTHER DATE box SHOULD come up
and when the user selects NA, ANOTHER DATE box should come up..

Yes, and NA work perfectly, but NO does not...,

if you can help me with this that would be magic!

<script type="text/javascript"><!--
var lastDiv1 = "";
function showDiv1(divName1) {
	// hide last div
	if (lastDiv1) {
		document.getElementById(lastDiv1).className = "hiddenDiv1";
	}
	//if value of the box is not nothing and an object with that name exists, then change the class
	if (divName1 && document.getElementById(divName1)) {
		document.getElementById(divName1).className = "visibleDiv1";
		lastDiv1 = divName1;
	}
}
//-->

</script>

<style type="text/css" media="screen"><!--
.hiddenDiv1 {
	display: none;
	}
.visibleDiv1 {
	display: block;
	border: 1px grey solid;
	}

--></style>
</script>


<select name="Test" size="1" onchange="showDiv1(this.value);" >
<option value="" >Choose One...</option >
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="NA">N/A</option>
</select >
<br>
	
<p id="Yes" class="hiddenDiv1">
Date <input type="text" name="Date" size="20">
</p>

<p id="No" class="hiddenDiv1">
</p>
<p id="NA" class="hiddenDiv1">
Another Date <input type="text" name="Another Date" size="20">
</p>

[Philip M]

<p id="No" class="hiddenDiv1">
Another Date <input type="text" name="Another Date" size="20">
</p>

Or am I not understanding your question?

Obviously Another Date can be Yet Another Date is desired.



Quizmaster: What was the principal language spoken by the ancient Romans?
Contestant: Greek

[wbva]

<p id="No" class="hiddenDiv1">
Another Date <input type="text" name="Another Date" size="20">
</p>

Or am I not understanding your question?

Obviously Another Date can be Yet Another Date is desired.



Quizmaster: What was the principal language spoken by the ancient Romans?
Contestant: Greek

creating a new instance of Another date, is not good, as when you send the information to the database it will send a blank value as well as the value the user puts into the box..

[Philip M]

Well, here's another idea:-


//if value of the box is not nothing and an object with that name exists, then change the class
if (divName1 == "No") {divName1 = "NA"}

[wbva]

Well, here's another idea:-


//if value of the box is not nothing and an object with that name exists, then change the class
if (divName1 == "No") {divName1 = "NA"}

can you show me where in the code? coz its not working for me..

cheers

[Philip M]

can you show me where in the code? coz its not working for me..

cheers

Well, it works for me, and I have indicated where to place the additional line quite clearly:

//if value of the box is not nothing and an object with that name exists, then change the class
[COLOR="Blue"]if (divName1 == "No") {divName1 = "NA"}[/COLOR]
if (divName && document.getElementById(divName)) {
		document.getElementById(divName).className = "visibleDiv";
		lastDiv2 = divName;
	}
}

[wbva]

Well, it works for me, and I have indicated where to place the additional line quite clearly:

//if value of the box is not nothing and an object with that name exists, then change the class
[COLOR="Blue"]if (divName1 == "No") {divName1 = "NA"}[/COLOR]
if (divName && document.getElementById(divName)) {
		document.getElementById(divName).className = "visibleDiv";
		lastDiv2 = divName;
	}
}

it does not work.. try it for yourself... and see..

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>

<body>

<script type="text/javascript"><!--
var lastDiv1 = "";
function showDiv1(divName1) {
	// hide last div
	if (lastDiv1) {
		document.getElementById(lastDiv1).className = "hiddenDiv1";
	}
	//if value of the box is not nothing and an object with that name exists, then change the class
	if (divName1 && document.getElementById(divName1)) {
		document.getElementById(divName1).className = "visibleDiv1";
		lastDiv1 = divName1;
	}
	
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName1 == "No") {divName1 = "NA"}
if (divName && document.getElementById(divName)) {
		document.getElementById(divName).className = "visibleDiv";
		lastDiv2 = divName;
	}
}
//-->

</script>

<style type="text/css" media="screen"><!--
.hiddenDiv1 {
	display: none;
	}
.visibleDiv1 {
	display: block;
	border: 1px grey solid;
	}

--></style>
</script>


<select name="Test" size="1" onchange="showDiv1(this.value);" >
<option value="" >Choose One...</option >
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="NA">NA</option>
</select >
<br>
	
<p id="Yes" class="hiddenDiv1">
Date <input type="text" name="Date" size="20">
</p>

<p id="No" class="hiddenDiv1">

<p id="NA" class="hiddenDiv1">
Another Date <input type="text" name="Another Date" size="20">
</p>

</body>

</html>

[Philip M]

What on earth are you doing? Simply add the line in blue.

var lastDiv1 = "";
function showDiv1(divName1) {
	// hide last div
	if (lastDiv1) {
		document.getElementById(lastDiv1).className = "hiddenDiv1";
	}
	//if value of the box is not nothing and an object with that name exists, then change the class
[COLOR="Blue"]if (divName1 == "No") {divName1 = "NA"}[/COLOR]
	if (divName1 && document.getElementById(divName1)) {
		document.getElementById(divName1).className = "visibleDiv1";
		lastDiv1 = divName1;
	}
}
//-->