Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old April 27th, 2009, 06:15 AM
Authorized User
 
Join Date: Apr 2009
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
Default js to search the name of an image according to drop down boxes

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 April 27th, 2009, 04:52 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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?

Last edited by Old Pedant; April 27th, 2009 at 04:59 PM.. Reason: Misread original post.
 
Old April 27th, 2009, 04:57 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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>
...
 
Old April 29th, 2009, 05:22 AM
Authorized User
 
Join Date: Apr 2009
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
Default

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......
 
Old April 30th, 2009, 11:09 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

Quote:
Originally Posted by Old Pedant View Post
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.
__________________
-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
 
Old May 1st, 2009, 04:11 AM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
The Following User Says Thank You to Old Pedant For This Useful Post:
delgado (May 4th, 2009)
 
Old May 3rd, 2009, 07:22 AM
Authorized User
 
Join Date: Apr 2009
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
Default

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:
<html>
<BODY>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function ImgError(source){
source.src = "/folder_images/image_not_found.bmp";
source.onerror = "";
return true;
}

var number= window.location.search.substring(1) ;
document.writeln('<table border="0" align="center" cellspacing="1" cellpadding="0"><tr><td> <IMG SRC="folder_images/' + window.location.search.substring(1) + '.bmp"
'+ onerror="ImgError(this)"' WIDTH=640 HEIGHT=340></td></tr></table>');

//--></SCRIPT>
</body>
</html>
Any idea for what is going wrong?
 
Old May 4th, 2009, 01:49 PM
Authorized User
 
Join Date: Apr 2009
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
Default

Thanks a lot Old Pedant....
I had a few errors in the last code that needed fixing....
Ok my thread is closed
 
Old May 8th, 2009, 02:32 PM
Authorized User
 
Join Date: Nov 2008
Location: virudhunagar, tamil nadu, India.
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts
Cool Thanks for both of you guys.

Your Thread taught me a lot.




Similar Threads
Thread Thread Starter Forum Replies Last Post
Forms and drop down boxes Apocolypse2005 Javascript 1 December 6th, 2005 11:26 AM
JS validation on the drop-down menus crmpicco Javascript How-To 0 July 1st, 2005 05:30 AM
drag and drop to multiple text boxes gbuller VB.NET 5 September 6th, 2004 09:55 PM
Assigning Macros to Drop Down Boxes ashu_gupta75 Excel VBA 1 August 12th, 2004 12:44 AM
Two drop down dependent list boxes and a Button tcasp Classic ASP Basics 0 August 5th, 2003 02:06 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.