JS coding for onclick values.

andyuk

07-24-2011, 01:59 PM

Hi, I am fairly new to this.

I am looking to add an onclick value to open a new url when a particular airport (see code below) is selected. Where would each onclick value be placed and what should it look like? I have tried adding onclick values but to no avail! Any help would be greatly appreciated. The code I have (which can probably be improved upon) is the following:

<div class="sign" style="margin-bottom:5px;">

<div class="boxTopSepLeft"><div class="boxTopSepRight"></div></div>

<div class="boxContentLeft"><div class="boxContentRight">

<form method="GET" name="SelForm" class="alttxt" onsubmit="return check_form();" action="/cgi-bin/searching.pl?" >

<input name="px" type="hidden" value="2" />

<input name="agent" type="hidden" value="100615" />

<input name="tmp" type="hidden" value="100615" />

<input name="tc" type="hidden" value="g" />

<input name="session" type="hidden" value="4f2f40bab764b3cccb97cc961dadf6ea" />

<table width="350" border="0" align="center" cellpadding="3" cellspacing="6">

<tr>

<td width="85"><b class="quoteBoxTitles">UK Airport:</b></td>

<td width="275" colspan="2"><select size="1" name="ap" class="quoteFormBoxes">

<option value="" selected>Select U.K. Airport</option>

<option value="ABZ">Aberdeen</option>

<option value="BFS">Belfast</option>

<option value="BHX">Birmingham</option>

<option value="BRS">Bristol</option>

<option value="CWL">Cardiff, Wales</option>



<option value="DSA">Doncaster (Robin Hood)</option>

<option value="MME">Durham Tees Valley</option>

<option value="EMA">East Midlands</option>

<option value="EDI">Edinburgh</option>

<option value="EXT">Exeter</option>

<option value="LGW">Gatwick</option>

<option value="GLA">Glasgow</option>

<option value="LHR">Heathrow</option>

<option value="HUY">Humberside</option>

<option value="LBA">Leeds/Bradford</option>

<option value="LPL">Liverpool</option>



<option value="LTN">Luton</option>

<option value="MAN">Manchester</option>

<option value="NCL">Newcastle</option>

<option value="PIK">Prestwick</option>

<option value="DSA">Sheffield (Robin Hood)</option>

<option value="SOU">Southampton</option>

<option value="STN">Stansted</option>

<option value="MME">Teesside</option>

</select>

</td>

</tr>

<tr>

thesam101

07-24-2011, 02:18 PM

Hi andyuk

probably worth checking out an answer I gave to a very similar question on another forum:

http://www.htmlforums.com/html-xhtml/t-help-with-simple-drop-down-and-submit-140530.html

:thumbsup:

devnull69

07-24-2011, 02:20 PM

If you click on one of the airports, the <select> changes its value ... so I think you'll have to add an onchange="..." to the select.

<select size="1" name="ap" class="quoteFormBoxes" onchange="callURL(this.value)">

Javascript:
function callURL(myValue) {
switch(myValue) {
case "ABZ" : location.href = "http://www.whatever.com"; break;
case "BFS" : location.href = "http://www.whatelse.com"; break;
...
}
}

andyuk

07-24-2011, 03:16 PM

Philip M

07-24-2011, 03:48 PM

Here is another example:-

<html>
<head>

<script type = "text/javascript">
function selectToNewWindow(form) { //default is 0; what loads is determined by option selected value
var formindex=form.thislocation.selectedIndex;
if(formindex<1){
alert('Please make a selection from the list\n- before you click the GO button -')
}
if(formindex > 0){
window.open(form.thislocation.options[formindex].value,"blank");}
}

</script>

</head>

<body>

<p>Select a site from the 'drop down' boxes, then press GO. Each site opens in a new window.</p>
<br>

<form id ="myform">
<select name="thislocation" size=1>
<option value selected="">Select a URL.....</option>
<option value="http://www.google.com">Google</option>
<option value = "http://www.yahoo.com/">Yahoo</option>
<option value="http://www.codingforums.com">Coding Forums</option>
<option value="http://www.javascriptkit.com">Javascript Kit</option>
</select>
<input type=button value="GO" style="background:00ff00" onClick="selectToNewWindow(this.form)">
</form>

</body>
</html>

Instead of a button you could also use an onchange event in the select to call the script.

thesam101

07-24-2011, 04:11 PM

Thanks for your help so far guys, however when I said I was fairly new to this I probably meant very new!
Is it possible for anyone to give a working example of say two of the airports linking to different sites ( each airport value will link to a different url), from which I can look at the code and add the rest? Im very confused about where I should be adding the examples given so far!

Many thanks again.

Well my example will be confusing if you aren't accustomed to PHP, as its PHP based.

I made it PHP based becuase some users may have JS disabled, and it is best practice to only use JS to enhance your site, rather than have site usage depend on JS.

For that reason I gave a PHP example :thumbsup: However, if you aren't familiar with PHP, get familiar with it ;), but in the short term use one of the other posters JS examples, as they may be easier to understand.

andyuk

07-24-2011, 06:17 PM

Thanks once again to all, it's slowly becoming clearer and I think I will be able to incorporate your ideas in to the site. Cheers!