Function with URL call

**dz.slick** · 11-09-2011, 07:41 AM

How do I get the function below to automatically take visitors to different URLs if the value they enter matches man or woman. E.g If it matches man, it takes them to URL A while Woman takes them to URL B

Code:

<script type='text/javascript'>

var urlMap = {
  'man' : 'http://some.domain/something',
  'woman' : 'http://some.domain/something/else',
  'cat' : 'http://whatever.you.want/more/here',
  'dog' : 'http://the.last.example/for/now'
};


function lookupUrl( choice ) {
  var url = urlMap[ choice ];
  if (url === undefined) throw "Improper input!";
  return url;
}



</script>

  <form>
Letters Only: <input type='text' id='letters'/>
<input type='button' 
    onclick="isAlphabet(document.getElementById('letters'), 'Letters Only Please')"
    value='Check Field' />
</form>

Please help me, How do I get it to work?

**molendijk** · 11-09-2011, 11:57 AM

Your function isAlphabet is not defined.
But why shouldn't you use a selectbox for what you want? It'll save you the effort of prompting the users who put something in the box that you don't want at all.
Here's something you could use. The URLS are just examples. If you want to open the URLS in an iframe, choose the 4 first options. If you want them to open in a new window, choose the last 4 options:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0001)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0001)">
 
<title></title>
 
<meta http-equiv="imagetoolbar" content="no" >
<script type="text/javascript">
//This script enables execution of scripts by putting them in the options of selectboxes (if the text of a given option corresponds with the contents of a given script, then the script is executed when the option is clicked on).
function load_script_container()
{var div_node=document.createElement('div');
div_node.setAttribute("id", "script_container");
document.body.appendChild(div_node);}
window.onload=load_script_container

function javascript_in_selectbox(which_box) {
var optionValue=document.getElementById(which_box).options[document.getElementById(which_box).selectedIndex].value;
if (optionValue=="none") {}
else {
var script_inside_selectbox_option = document.createElement('script');
script_inside_selectbox_option.type = 'text/javascript';
script_inside_selectbox_option.text = optionValue;
while(document.getElementById("script_container").firstChild)
{document.getElementById("script_container").removeChild(document.getElementById("script_container").firstChild);}
document.getElementById("script_container").appendChild(script_inside_selectbox_option);
}
}
</script>

<script type="text/javascript">
document.write('<div id="select_div" style="display:inline"><\/div>')
function write_to_div(url)
{
document.getElementById("select_div").innerHTML="<div style='position: absolute; left:100px; top: 100px; right: 100px; bottom: 100px'><div onclick='document.getElementById(\"select_div\").innerHTML=\"\"' style='float: right; cursor: pointer; margin-top: -17px; font-family: verdana; font-size:13px; padding-left:3px; padding-right:3px; color: white; background: black'>X<\/div><iframe style='position: absolute; width: 100%; height: 100%' src="+url+"><\/iframe><\/div>"
}
</script>
</head>

<body>

Make your choice&nbsp;
<!--[if IE]> <div style="position: relative; width:132px; overflow:hidden; border: 1px solid black"> <![endif]-->
<!--[if !IE]><!--> <div> <!--<![endif]--> 
<select name="something" id="something" style="position:relative;width:132px;" onchange="javascript_in_selectbox('something');selectedIndex=0;this.blur();if (/*@cc_on!@*/false){this.style.width='132px'};" onblur="if (/*@cc_on!@*/false){this.style.width='132px'}" onmousedown="if (/*@cc_on!@*/false){this.style.width='220px'}" >
<option value="none" selected style="color:darkred" class="first_option" >Make your choice</option>

<option value="write_to_div('http://www.dynamicdrive.com')" >Man</option>
<option value="write_to_div('http://www.hostsearch.com')">Woman</option>
<option value="write_to_div('http://www.dreamtemplate.com')">Cat</option>
<option value="write_to_div('http://www.dailymotion.com')">Dog</option>

<option value="window.open('http://www.dynamicdrive.com')" >Man (opens in new window)</option>
<option value="window.open('http://www.hostsearch.com')" >Woman (opens in new window)</option>
<option value="window.open('http://www.dreamtemplate.com')" >Cat (opens in new window)</option>
<option value="window.open('http://www.dailymotion.com')" >Dog (opens in new window)</option>

</select>
</div> 

</body>

</html>

Arie Molendijk.

**dz.slick** · 11-09-2011, 02:45 PM

Arie, it is an input because me clients will all Be given access codes which will help them access their specific pages to see their subscriptions. Please help me. thanks

**molendijk** · 11-09-2011, 02:50 PM

Do you have a link to the problematic page, or the source of the complete page?
Arie.

**dz.slick** · 11-09-2011, 03:03 PM

I'm trying it first before Implementing proper. you understand Exactly what I need But the difference is that the client will enter a given code; then if matches A (hidden) it takes them to where they'll see their receipt and subscription details.

**molendijk** · 11-09-2011, 03:43 PM

OK, but give me at least the function isAlphabet then. It's invoked on your page, but I don't know what it does. It should be defined somewhere.
Arie.

**dz.slick** · 11-09-2011, 04:14 PM

Thanks for your patience and help. Someone got me confused with that one bro, and I'm still a learner. What if we add this line

var theUrl = lookupUrl(document.getElementById('letters').value);

You're a senior developer, make what ever changes that you think are necessary.
How do we get it to work.
Please help me

**molendijk** · 11-09-2011, 06:45 PM

This would be a solution in its simplest form:

Code:

<head>

<script type="text/javascript">
function access()
{
if(document.getElementById('letters').value=='man')location.href='http://www.google.com'
else if(document.getElementById('letters').value=='woman')location.href='http://www.dynamicdrive.com'
else if(document.getElementById('letters').value=='cat')location.href='http://www.youtube.com'
else if(document.getElementById('letters').value=='dog')location.href='http://www.dailymotion.com'
else alert('Access denied. Try again.')
}
</script>

</head>

<body>
<form>
Letters Only: <input type='text' id='letters'></input>
<input type='button' onclick='access()' value='Check Field' ></input>
</form>
</body>

You can elaborate it further.
Arie.