Forum Moderators: open
Each selection has a unique url associated with it, how can it be done?
Below is the code I currently have, greatly appreciate your help
<body>
<select name="sel1" style="border:0px;" style="font-size: 8pt; font-weight:
bold; color: blue; background-color: white;">
<option value="p0">Select Program</option>
<option value="p1">Nsite</option>
<option value="p2">SMO</option>
<option value="p3">XXX</option>
<option value="p4">Other</option>
</select><br /><PRE>
</pre>
<font style="font-size: 8pt; font-weight: bold; color:
black;">Login</font><br /><input type="text" size="15" name="login" style="font-size: 8pt; font-weight: bold; color: black; background-color: lightgray;"><br /><font style="font-size: 8pt; font-weight: bold; color: black;">Password</font><br /><input type="password" size="15" name="password" style="font-size: 8pt; font-weight: bold; color: black; background-color: lightgray;">
<input type="button" value="go">
</body>
</html>
There are three ways to go that come to mind right away.
1. show/hide login divs based on option selected
2. change the source of an iframe based on option selected
3. navigate to a separate login page based on option selected.
I think that we discussed 1. and 2. in the thread [webmasterworld.com...] so here is #3.
<script type ="text/javascript">
<!--
function navLogin(obj){
var newPage=obj.options[obj.selectedIndex].value
window.location=newPage
}
//-->
</script>
<body>
<select id="sel1" name="sel1" style="border:0px;" style="font-size: 8pt; font-weight:
bold; color: blue; background-color: white;" onchange="navLogin(this)">
<option value="login1.htm">Select Program</option>
<option value="login2.htm">Nsite</option>
<option value="login3.htm">SMO</option>
<option value="login4.htm">XXX</option>
<option value="login5.htm">Other</option>
</select><br />
</body>
</html>
ajkimoto
that doesn't work. I can't use the first 2, thus I am asking for help with my code.
thanks
Yet another alternative would be to dynamically set the action of the login form based on the selection:
<script type ="text/javascript">
<!--
function setAction(obj){
var actionType=obj.options[obj.selectedIndex].value
var newAction=""
switch (actionType){
case "p0":
newAction="site1.htm"
break;
case "p1":
newAction="site1.htm"
break;
case "p2":
newAction="site2.htm"
break;
case "p3":
newAction="site3.htm"
break;
case "p4":
newAction="site4.htm"
break;
default:
newAction=""
}
document.forms[0].action=newAction
}
//-->
</script>
<body>
<select name="sel1" style="border:0px;" style="font-size: 8pt; font-weight:
bold; color: blue; background-color: white;" onchange="setAction(this)">
<option value="p0">Select Program</option>
<option value="p1">Nsite</option>
<option value="p2">SMO</option>
<option value="p3">XXX</option>
<option value="p4">Other</option>
</select><br /><PRE>
</pre>
<form id="myform" name="myform" method="post" action="">
<font style="font-size: 8pt; font-weight: bold; color:
black;">Login</font><br /><input type="text" size="15" name="login" style="font-size: 8pt; font-weight: bold; color: black; background-color: lightgray;"><br /><font style="font-size: 8pt; font-weight: bold; color: black;">Password</font><br /><input type="password" size="15" name="password" style="font-size: 8pt; font-weight: bold; color: black; background-color: lightgray;">
<input type="button" value="go">
</form>
</body>
</html>
Is this more what you had in mind?
ajkimoto
Thanks, I am not sure though. I tried to "test" it out but nothing happened. I chnaged newAction="site4.htm" to a real url and nothing happened. I did enter a password/username and clicked go but still no movement.
Thanks,
<input type="button" value="go">
to:
<input type="submit" value="go">
right?
ajkimoto
Is it possible to have the URL open up in a new window? (ie. target="_blank")
Thanks again
You can indeed add the target="_blank" attribute to your form tag. However, keep in mind that this attribute is not valid strict XHTML (though valid in transitional XHTML and HTML 4-.
ajkimoto
thanks, that is a bit over my head, but I think having them stay in the same window is fine.
more of a general question, in theory would I be able to create a cookie that would remember what the user last selected and have it be selected to that?
Not sure if I worded that right but basically if the user selected option 3, would a coookie "remember" that and when they revisit be ready for them?
Thanks again
Here is an example of using cookies to set the selected option.
setCookie() is set to fire when the select object changes and sets the cookie
getLogin() is set to fire on body load and will get the cookie if already set and select the appropriate option in the select object
<script type="text/javascript">
<!--
//accepts the name of the cookie to be created
function getLogin(cName) {
var cCookie=""+document.cookie;
var ind=cCookie.indexOf(cName);
if (ind==-1 ¦¦ cName=="") return "";
var ind1=cCookie.indexOf(';',ind);
if (ind1==-1) ind1=cCookie.length;
lastLogin= unescape(cCookie.substring(ind+cName.length+1,ind1))
//if the cookie exists then set the correct option
if (lastLogin.length>=1){
var oSelect=document.getElementById('mySelect')
for(i=0;i<oSelect.options.length;i++){
if(oSelect.options[i].value==lastLogin){
oSelect.options[i].selected="selected"
}
}
}
}
//accepts the name of the cookie, the value to be set, and the number of days until the cookie expires
function setCookie(cName,cValue,nDays){
var dCurDate = new Date()
var dExpireDate= new Date()
nDays=(nDays=null ¦¦ nDays==0?1:nDays)
dExpireDate.setTime(dCurDate.getTime() + 86400000*nDays)
document.cookie = cName+"="+escape(cValue)+ ";expires="+dExpireDate.toGMTString()
}
//-->
</script>
</head>
<!--on body load, get the LoginPref cookie and set correct option of the mySelect object//-->
<body onload="getLogin('LoginPref')" >
<!--on change, set/reset the LoginPref cookie//-->
<select id="mySelect" onchange="setCookie('LoginPref',this.options[this.selectedIndex].value,30)">
<option value="login1.htm">test1</option>
<option value="login2.htm">test2</option>
<option value="login3.htm">test3</option>
</select>
</body>
ajkimoto
