js to search the name of an image according to drop down boxes

delgado · April 27th, 2009, 06:15 AM

Hello
I have three drop down boxes....I made a script that reads the selected values and load an image with a name according to the selected drop down boxes.....What if some images do not exist in the folder pm10....? Then i would like an error alert.....I think that i would be helpful with a search of the image names according to the inputs of the dorp down menu and if the image does not exists then return an error alert.....
Here is my code

Code:

<html>
<head>
<title>PAGE 1</title> 
<script language="JavaScript">

function GetSelectedItem() {
lenday=document.form.day.length
i=0
chosenday="none"
lenmonth=document.form.month.length
j=0
chosenmonth="none"
lenyear=document.form.year.length
k=0
chosenyear="none"

for (i=0; i<lenday; i++) {
if (document.form.day[i].selected) {
chosenday=document.form.day[i].value
}
}
for (j=0; j<lenmonth; j++) {
if (document.form.month[j].selected) {
chosenmonth=document.form.month[j].value
}
}
for (k=0; k<lenyear; k++) {
if (document.form.year[k].selected) {
chosenyear=document.form.year[k].value
}
}
var myDate=chosenday+chosenmonth+chosenyear
var yourDate=chosenday+"/"+chosenmonth+"/"+chosenyear
var loadDate=chosenday+chosenmonth+chosenyear+".png"
window.location.href="pm10/"+loadDate+""

alert('You Selected: ' +yourDate)

}

</script>
</head>

<body>
<p><b>Please Select Date:</b></p>

<FORM NAME="form"><p>Day
<SELECT NAME="day">  
<Option value="01">01</Option>
<Option value="02">02</Option>
<Option value="03">03</Option>
<Option value="04">04</Option>
<Option value="05">05</Option>
<Option value="06">06</Option>
<Option value="07">07</Option>
<Option value="08">08</Option>
<Option value="09">09</Option>
<Option value="10">10</Option>
<Option value="11">11</Option>
<Option value="12">12</Option>
<Option value="13">13</Option>
<Option value="14">14</Option>
<Option value="15">15</Option>
<Option value="16">16</Option>
<Option value="17">17</Option>
<Option value="18">18</Option>
<Option value="19">19</Option>
<Option value="20">20</Option>
<Option value="21">21</Option>
<Option value="22">22</Option>
<Option value="23">23</Option>
<Option value="24">24</Option>
<Option value="25">25</Option>
<Option value="26">26</Option>
<Option value="27">27</Option>
<Option value="28">28</Option>
<Option value="29">29</Option>
<Option value="30">30</Option>
<Option value="31">31</Option>
</SELECT>

Month <SELECT NAME="month">
<Option value="01">January</Option>
<Option value="02">February</Option>
<Option value="03">March</Option>
<Option value="04">April</Option>
<Option value="05">May</Option>
<Option value="06">June</Option>
<Option value="07">July</Option>
<Option value="08">August</Option>
<Option value="09">September</Option>
<Option value="10">October</Option>
<Option value="11">November</Option>
<Option value="12">December</Option>
</SELECT>

Year <SELECT NAME="year">
<Option value="2004">2004</Option>
<Option value="2005">2005</Option>
<Option value="2006">2006</Option>
<Option value="2007">2007</Option>
<Option value="2008">2008</Option>
<Option value="2009">2009</Option>
</SELECT>
<INPUT type="submit" value="Go!!" NAME="inputbox" target="_blank" onClick="GetSelectedItem()">
</FORM>

</html>

Is what i want possible with javascript? If so, how could i achieve something like that?

Any help would be very appreciated.....

Old Pedant · April 27th, 2009, 04:52 PM

Well, you can't do it if you just use

Code:

window.location.href="pm10/"+loadDate+""

(what's the +"" on the end of that for?? It is doing nothing at all.)

But what you could do is instead load the image file *INTO* an <IMG> tag and then wait for the onerror event.

So let's say you change your code to:

Code:

window.location.href="showImage.html?"+loadDate;

And then you would have the showImage.html page try to load the given image into an <img> tag and handle the onerror event from that tag.

It's not too important, but I would have named the images as "YYYYMMDD.png" instead of as "DDMMYYYY". It's easier to sort them and find any that are missing if you do that.

Are you really expecting to have over 2000 images with this naming convention?

Old Pedant · April 27th, 2009, 04:57 PM

Here's the MUCH simplified and better way to write that JS code:

Code:

<html>
<head>
<title>PAGE 1</title> 
<script language="JavaScript">

function GetSelectedItem() 
{
    var form = document.forms[0];
    var chosenyear  = form.year.options[form.year.selectedIndex].value;
    var chosenmonth = form.month.options[form.month.selectedIndex].value;
    var chosenday   = form.day.options[form.day.selectedIndex].value;

    var myDate=chosenday+chosenmonth+chosenyear; // WHAT IS THIS FOR???
    var yourDate=chosenday+"/"+chosenmonth+"/"+chosenyear
    var loadDate=chosenday+chosenmonth+chosenyear+".png"

    window.location.href="showDateImage.html?"+loadDate;
    alert('You Selected: ' +yourDate);
}

</script>
</head>
...

delgado · April 29th, 2009, 05:22 AM

Nice idea Old Pedant
You mean to load with my function a new (showImage.html) page which will pull up the png i want....In that page it wiil be running a script so that if the spesific image do not exist an erroor wiil occur..... Is that right?
So....in showImage.html if i put an img tag like <img src="pm10/ +loadDate"> nothing happens because i think it does nt understand loadDate variable......I am stucked......
Yes your code is much more simplyfied but I am new in js all all the newbies make things complicated....
Thanks in advanced......

chroniclemaster1 · April 30th, 2009, 11:09 PM

Quote:

Originally Posted by Old Pedant

It's not too important, but I would have named the images as "YYYYMMDD.png" instead of as "DDMMYYYY". It's easier to sort them and find any that are missing if you do that.

I completely agree. I hear people argue over US vs. European date formats. I think you should use this format which alphabetizes by default. I use this with files as I'm going through testing so I can easily tell which is the newest most developed file.

Old Pedant · May 1st, 2009, 04:11 AM

Quote:

In that page it wiil be running a script so that if the spesific image do not exist an erroor wiil occur..... Is that right?

Exactly.

That page could be something like this:

Code:

<html>
<body>
<script>
document.write('<img src="' + location.search.substring(1) + '" '
            + ' onerror="this.src='/images/image_not_found.jpg';">');
</script>
</body>
</html>

location.search is the url of the current page starting with the ?
So we use location.search.substring(1) to get rid of the question mark.

And then the onerror simply says "if this image doesn't load properly, then instead load our standard 'image not found' image".

That could be a JPG image that is actually just some text in it that has a useful message.

delgado · May 3rd, 2009, 07:22 AM

First of all thanks for the ideas....
Unfortonately the code that you suggested to me didn t work....! Did you tested it?So i made a function for my case of but still dont work. Here it is

Quote:

Any idea for what is going wrong?

delgado · May 4th, 2009, 01:49 PM

Thanks a lot Old Pedant....
I had a few errors in the last code that needed fixing....
Ok my thread is closed

selva_dhivya · May 8th, 2009, 02:32 PM

Your Thread taught me a lot.