/    Sign up×
Community /Pin to ProfileBookmark

How to go to a page referenced by dropdown boxes

In the following code (the syntax of which I obtained from an on-line tutorial):

<input type=”button” name=”map” value=”Click” onClick=”Javascript:self.location=’../maps2/surface/slideshows/200501/images/2005010100.gif'”>

I want to go to the URL that comes after the ‘location’ statement (the above are sub-directories, as is probably obvious). The numbers are derived from dropdown boxes like this:
<select name=”mapyear”>
<option value=”2005″>2005</option>
Similar options are used to get month, day and hour, which in the above example are represented by the ‘010100’.

I used the above example to see if I had other syntax right, and the .gif file loaded. But I need to choose the year (2005), month (01), day (01) and hour (00) after the ‘location’ statement. By that I don’t mean those numbers (I just give those as examples), but any year, month, day and hour.

It seems I have to concatenate the 4 numbers, but when following online advice to use a plus sign, it didn’t work.I also tried defining variables and that made no difference either. I tried substituting ‘mapyear’ (the name of the ‘year’ dropdown option, shown in the above code) for 2005 but that failed. The main issues are that I don’t know what to put in between the items called by the <option value> tags (eg ‘ or & or “” or +), nor how to declare these as variables correctly if necessary (having tried that and not succeeded).

So, how do I relate what follows the ‘location’ statement to what’s been chosen in each of the <option value> tags, so that if, for example, I choose the above parameters in the dropdown boxes, that file will load?

Thanks

to post a comment
HTML

4 Comments(s)

Copy linkTweet thisAlerts:
@FangAug 03.2005 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;form&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
&lt;!--
function pathInfo() {
var f=document.map;
//self.location='../maps2/surface/slideshows/200501/images/2005010100.gif';
var year=f.mapyear[f.mapyear.selectedIndex].value;
var month=f.mapmonth[f.mapmonth.selectedIndex].value;
var day=f.mapday[f.mapday.selectedIndex].value;
var hour=f.maphour[f.maphour.selectedIndex].value;
self.location='../maps2/surface/slideshows/'+year+month+'/images/'+year+month+day+hour+'.gif';
}

//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form onsubmit="pathInfo();" action="#" method="post" name="map"&gt;
&lt;div&gt;
mapyear:&lt;select name="mapyear"&gt;
&lt;option value="2005"&gt;2005&lt;/option&gt;
&lt;option value="2004"&gt;2004&lt;/option&gt;
&lt;option value="2003"&gt;2003&lt;/option&gt;
&lt;/select&gt;
mapmonth:&lt;select name="mapmonth"&gt;
&lt;option value="01"&gt;01&lt;/option&gt;
&lt;option value="02"&gt;02&lt;/option&gt;
&lt;option value="03"&gt;03&lt;/option&gt;
&lt;/select&gt;
mapday:&lt;select name="mapday"&gt;
&lt;option value="01"&gt;01&lt;/option&gt;
&lt;option value="02"&gt;02&lt;/option&gt;
&lt;option value="03"&gt;03&lt;/option&gt;
&lt;/select&gt;
maphour:&lt;select name="maphour"&gt;
&lt;option value="01"&gt;01&lt;/option&gt;
&lt;option value="02"&gt;02&lt;/option&gt;
&lt;option value="03"&gt;03&lt;/option&gt;
&lt;/select&gt;
&lt;button type="submit"&gt;new image&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@wthrmanauthorAug 03.2005 — Thank you very much for that, Fang, however I am having trouble getting the chosen image to load.

If you need to test it, it's here: http://www.wthrman.com/nswsc/test.html ..I've removed 2003 from the year box as no .GIF files are in that year's directory yet, also I've changed the hours to match what's in the other years' folders. I've also checked that the path that I initially indicated is correct.

Sorry to be a pain but I'm on a bit of a learning curve.

Thanks again
Copy linkTweet thisAlerts:
@FangAug 04.2005 — Change this line:
&lt;form onsubmit="pathInfo(); return false;" action="#" method="post" name="map"&gt;
Copy linkTweet thisAlerts:
@wthrmanauthorAug 04.2005 — Thanks again Fang for that, everything works beautifully! Your help has been most appreciated, and instructive.

Cheers
×

Success!

Help @wthrman spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...