2 Tier drop down.. please help

Forum Moderators: open

Message Too Old, No Replies

2 Tier drop down.. please help

Acternaweb

2:35 pm on Mar 25, 2004 (gmt 0)

Not sure whatelse to call it, but can someone help me find a script where after one selection is made, log in boxes appear.

thanks

BlobFisk

6:22 pm on Mar 25, 2004 (gmt 0)

Why not use onChange on your <select> to dynamically switch the visibility/display of <div>'s with the appropriate mark-up based on the <option> selected?

HTT

Acternaweb

3:34 pm on Mar 26, 2004 (gmt 0)

not sure what that means, I haven't written code from scratch, more of a cut and paster since it is not my trade

ajkimoto

4:01 pm on Mar 26, 2004 (gmt 0)

Acternaweb,

I think BlobFisk meant something like this:

//hide the div
document.getElementById('loginDiv').style.display="none"
}
}
//-->
</script>

<div id="loginDiv" style="display:none;">
<p>Username: <input type="text" name="username" size="30" /></p>
<p>Password: <input type="password" name="userpass" size="30" /></p>
</div>

When the user changes the select, it fires the checkResponse() function, which gets the value of the selected index and shows/hides the login div based on the response ('Yes' shows, 'No' hides) by changing the style display type.

ajkimoto

Acternaweb

3:49 pm on Mar 30, 2004 (gmt 0)

ajkimoto

thanks that helps a lot. I am stuck though, I am trying to get it so that each "option" has different log in and it doesn't seem to want ot work. I tried adding and chaning the ID but still no luck. Any advice?

ajkimoto

3:19 pm on Mar 31, 2004 (gmt 0)

Acternaweb,

Do you mean that based upon the choice in the select box a different login div should appear? If so, how many different login divs do you have?

ajkimoto

Acternaweb

3:28 pm on Mar 31, 2004 (gmt 0)

ajkimoto

hi, yes that is exactly right. Right now there will be 3 login but that could grow. if you know a better way to handle this, I am all ears.

thanks so much

ajkimoto

5:48 pm on Mar 31, 2004 (gmt 0)

Well, you could do something like this, but it might not be the best way if the number of different logins is going to change frequently. In such a case, a server-side solution might be better.

Essentially, this script loads a different page into an iframe based on the selected option using the switch control structure.

Just create a separate case in the switch for each login type from the select object and a separate login page for each case in the switch.

Probably a better way to go if you are going to have increasing numbers of login pages would be to build the page dynamically using some kind of server-side code. You could also have just one js_login.htm page, built differently based on parameters passed to it from this page...

//this function checks the value of the selected option and changes the src of the iframe to the appropriate page.
function checkResponse(obj){
var curOpt=obj.options[obj.selectedIndex].value
//switch allows branching based on value of curOpt
switch (curOpt){
case 'login1':
//set src of iframe to js_login1.htm
document.getElementById('myFrame').src="js_login1.htm"
break;

case 'login2':
//set src of iframe to js_login2.htm
document.getElementById('myFrame').src="js_login2.htm"
break;

case 'login3':
//set src of iframe to js_login3.htm
document.getElementById('myFrame').src="js_login3.htm"
break;

default:
//default empty src for iframe
document.getElementById('myFrame').src="";
}
}
//-->
</script>

</style>

</head>

<body>
<select id="mySelect" onchange="checkResponse(this)">
<option value="">Choose Login</option>
<option value="login1">login1</option>
<option value="login2">login2</option>
<option value="login3">login3</option>
</select>
<br />
<iframe frameborder="0" style="border:0;" id="myFrame" src=""></iframe>

</body>

ajkimoto

Acternaweb

1:45 pm on Apr 1, 2004 (gmt 0)

thanks, I tried the iframe before and met a lot of resistance. can you recommend a server side script that would be able to handle this.