Discuss "drop down problem" in the JavaScript Programming forum.

todd2006 · #1 June 30th, 2008, 11:13 AM

Hi,

I have a drop down which has 3 values when one of them is selected I want to show content related to that value
in a div

when the page is first loaded I dont want to show any of the div's

Can someone tell me what i am doing wrong when the page is loaded first it displays the credit card div
and when i choose the options it doesnt give any error messages but it doesnt change the div's

Code:

<%

ReserveDisplaycredit = "none"
ReserveDisplaycash = "none"
ReserveDisplaycheck = "none"
%>

<select name="payway" id="payway" onChange="calloptionpay();">
<option value="">Select the Payment Type</option>
<option value="Cash">Cash</option>
<option value="Check">Check</option>
<option value="Credit Card">Credit Card</option>
</select>


<div id="reservecash" style="display: <%=ReserveDisplaycash%>;">
Cash
</div>

<div id="reservecheck" style="display: <%=ReserveDisplaycheck%>;">
check
</div>

<div id="reservecredit" style="display: <%=ReserveDisplaycredit%>;">
credit
</div>

function calloptionpay()
{
alert("hello");
var getpayway=document.frm1.payway.value;

alert(getpayway);

				
if(getpayway=="Cash")
{
hidecredit();
hidecheck();
changeDivcash('reservecash', 'block'); 
}
else if (getpayway=="Check")
{
hidecredit();
hidecash();
changeDivcheck('reservecheck', 'block'); 
}
else if (getpayway=="Credit Card")
{

hidecheck();
hidecash();
changeDivcredit('reservecredit', 'block'); 

}


}

function changeDivcash(the_div,the_change)
 {
	var the_style = getStyleObject(the_div);
	if (the_style != false)
		{
			the_style.display = the_change;
		}
  }

  function changeDivcredit(the_div,the_change)
 {
	var the_style = getStyleObject(the_div);
	if (the_style != false)
		{
			the_style.display = the_change;
		}
  }

  function changeDivcheck(the_div,the_change)
 {
	var the_style = getStyleObject(the_div);
	if (the_style != false)
		{
			the_style.display = the_change;
		}
  }


function hidecheck()
 {
	changeDivcheck("reservecheck", "none");
 }

 function hidecash()
 {
	changeDivcash("reservecash", "none");
 }

 function hidecredit()
 {
	changeDivcredit("reservecredit", "none");
 }
 
 function getStyleObject(objectId)
 { 
 	if (document.getElementById && document.getElementById(objectId))
 		{
 			return document.getElementById(objectId).style;
 		}
 	else if (document.all && document.all(objectId))
 		{
 		return document.all(objectId).style;
 		}
 	else
 		{
 		return false;
 		}
}

richyrich · #2 June 30th, 2008, 11:17 AM

Try putting your functions in <script></script> tags.

Code:

<script language="Javascript type="text/Javascript">
function whatever()
.
.
.
.
end function
 
function anotherfunction()
.
.
.
.
end function
</script>

Hope that helps.

todd2006 · #3 June 30th, 2008, 11:29 AM

Hi,

I have it in the script tags on my page. Did you mean to include script tags in the post

todd

richyrich · #4 June 30th, 2008, 11:49 AM

I meant in your page. If you have them in <script> tags, that's fine.

Change:-

Code:

var getpayway=document.frm1.payway.value;

to:-

Code:

var sel_payway = document.getElementById("payway")
var getpayway = sel_payway.options[sel_payway.selectedIndex].text

I can't see why the credit card info appears on page load. Maybe trying viewing the html source from the browser and see what's being rendered to the screen.

Hope that helps.

todd2006 · #5 June 30th, 2008, 12:27 PM

I tried it same thing it shows the div for credit card

Code:

<div id="reservecash" style="display: none;">
Cash
</div>

<div id="reservecheck" style="display: none;">
check
</div>

<div id="reservecredit" style="display: none;">
credit 
</div>

the above is what i see when i do a view source

richyrich · #6 June 30th, 2008, 12:36 PM

The code I posted related to your JS function for the OnChange event.

I'm still uncertain why the divs don't all hide.

todd2006 · #7 June 30th, 2008, 12:40 PM

yes the biggest problem is when the page is loaded why does it show the credit card div

Is there a different way of doing it

richyrich · #8 June 30th, 2008, 01:17 PM

I just tried the same and it worked fine. All the divs were hidden.

Could you post the whole code so I can see how it's structured?

todd2006 · #9 June 30th, 2008, 03:35 PM

here is the code

Code:

<%
Option Explicit
Dim ReserveDisplaycredit, ReserveDisplaycash, ReserveDisplaycheck


ReserveDisplaycredit = "none"
ReserveDisplaycash = "none"
ReserveDisplaycheck = "none"

Response.write "ReserveDisplaycredit:-" & ReserveDisplaycredit & "<br/>"
Response.write "ReserveDisplaycash" & ReserveDisplaycash & "<br/>"
Response.write "ReserveDisplaycheck" & ReserveDisplaycheck & "<br/>"

%>
<head>
<title>Main</title>

<script type="text/javascript">
<!--
function getStyleObject(objectId)
{ 
	if (document.getElementById && document.getElementById(objectId))
		{
			return document.getElementById(objectId).style;
		}
	else if (document.all && document.all(objectId))
		{
		return document.all(objectId).style;
		}
	else
		{
		return false;
		}
}

function calloptionpay()
{
var sel_payway = document.getElementById("payway")
var getpayway = sel_payway.options[sel_payway.selectedIndex].text
alert(getpayway);

			
if(getpayway=="Cash")
{
alert("are we here");
hidecredit();
hidecheck();
changeDivcash('reservecash', 'block'); 
}
else if (getpayway=="Check")
{
hidecredit();
hidecash();
changeDivcheck('reservecheck', 'block'); 
}
else if (getpayway=="Credit Card")
{

hidecheck();
hidecash();
changeDivcredit('reservecredit', 'block'); 

}


}

function changeDivcash(the_div,the_change)
 {
	var the_style = getStyleObject(the_div);
	if (the_style != false)
		{
			the_style.display = the_change;
		}
  }

  function changeDivcredit(the_div,the_change)
 {
 alert("change credit");
	var the_style = getStyleObject(the_div);
	if (the_style != false)
		{
			the_style.display = the_change;
		}
  }

  function changeDivcheck(the_div,the_change)
 {
  alert("change check");
	var the_style = getStyleObject(the_div);
	if (the_style != false)
		{
			the_style.display = the_change;
		}
  }


function hidecheck()
 {
  alert("hide check");
	changeDivcheck("reservecheck", "none");
 }

 function hidecash()
 {
	changeDivcash("reservecash", "none");
 }

 function hidecredit()
 {
 alert("hide credit");
	changeDivcredit("reservecredit", "none");
 }


//form Validation ends 
// -->
</script>

</head>
<body>

<form name="frm1" id="frm1" method="post"  action="confirm.asp"> 


<table>


<td>Payment Method:</td>
<td><select name="payway" id="payway" onChange="calloptionpay();">
<option value="">Select the Payment Type</option>
<option value="Cash">Cash</option>
<option value="Check">Check</option>
<option value="Credit Card">Credit Card</option>
</select>
</td>
</tr>

<div id="reservecash" style="display: <%=ReserveDisplaycash%>;">
Cash
</div>

<div id="reservecheck" style="display: <%=ReserveDisplaycheck%>;">
check
</div>


<div id="reservecredit" style="display: <%=ReserveDisplaycredit%>;">
credit
</div>

<%
Response.write "ReserveDisplaycredit:-" & ReserveDisplaycredit & "<br/>"
Response.write "ReserveDisplaycash" & ReserveDisplaycash & "<br/>"
Response.write "ReserveDisplaycheck" & ReserveDisplaycheck & "<br/>"

%>


</body>
</html>

richyrich · #10 June 30th, 2008, 05:25 PM

I copied your code exactly and it worked fine for me in IE6 and FF 2.

However, if that was the whole code, you are missing the following tags:-
<html>
<tr>
</table>
</form>

Maybe sorting these out will solve your problem.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
display problem with drop downs	todd2006	JavaScript Programming	3	May 5th, 2008 05:31 PM
drop down problem	todd2006	.Net Development	2	April 23rd, 2008 11:37 AM

Discuss "drop down problem" in the JavaScript Programming forum.

JavaScript Programming - Javascript is a cross-browser client-side scripting language. Discuss Javascript and AJAX related scripts here.