onclick in a calendar

delgado · April 21st, 2009, 12:36 PM

Hello to everyone
I have problem with this. I made a pop-up calendar witch appears the date you choose in a text form of my first page (page1). Ok so far... all i want to do is to make a scrip so that when you click the submit button, a new page will load (page2) with a photo as a content. The name of the photo will have the name of the date choosed previously (for example 2009-15-03.jpg)..... How can i achieve this concept?
Please help....

chroniclemaster1 · April 21st, 2009, 06:02 PM

Making javascript navigate to a new page is very easy. Use the window.location.href object to tell the script where you want to go and insert the URL of the image you want to pull up. Probably put the date in a variable like myDate and then specify the URL with it, e.g. myDate + ".jpg".

delgado · April 23rd, 2009, 05:25 AM

Thanks for the response
For my pop up calendar i used an overlib.js.....I dont know how to make the submit button on click to read the date in the form in order to load the appropriate jpg in page2....I made the part that loads in different page the jpg.

chroniclemaster1 · April 23rd, 2009, 12:52 PM

Hmmm... that's why I get leery of using libraries. You'll have to do some Google searches then and figure out how to do with with your Javascript. Libraries are cool in the sense that they have advanced functionality from someone who can probably program JS much better than you can. The downside is you're not "really" using Javascript because you're simply programming against the functions the library has to offer (in the same way that a CMS, like DotNetNuke, saves you from having to learn a lot of advanced XHTML and ASP.NET). However, when you start to customize them you need someone who's an expert in the specific library you're working with (or the CMS). Since I'm not an expert in the library you're using, I'm basically useless to you. :(

delgado · April 24th, 2009, 08:05 AM

Ok i got it
I discard the idea of the overlib.js concept
I made a new drop down date form with a sbmit button. Here is the code

Quote:

<html>
<head>
<title>PAGE 1</title>
<script language="JavaScript">
var day=
var month=
var year=
var date="day"+"/"+"month"+"/"+"year"

</script>
</head>

<body>
<p><b>Please Select Date:</b></p>
<FORM NAME="form1">
<p>Day
<SELECT NAME="day">
<Option value=0>01</Option>
<Option value=1>02</Option>
<Option value=2>03</Option>
<Option value=3>04</Option>
<Option value=4>05</Option>
<Option value=5>06</Option>
<Option value=6>07</Option>
<Option value=7>08</Option>
<Option value=8>09</Option>
<Option value=9>10</Option>
<Option value=10>11</Option>
<Option value=11>12</Option>
<Option value=12>13</Option>
<Option value=13>14</Option>
<Option value=14>15</Option>
<Option value=15>16</Option>
<Option value=16>17</Option>
<Option value=17>18</Option>
<Option value=18>19</Option>
<Option value=19>20</Option>
<Option value=20>21</Option>
<Option value=21>22</Option>
<Option value=22>23</Option>
<Option value=23>24</Option>
<Option value=24>25</Option>
<Option value=25>26</Option>
<Option value=26>27</Option>
<Option value=27>28</Option>
<Option value=28>29</Option>
<Option value=29>30</Option>
<Option value=30>31</Option>
</SELECT>

Month <SELECT NAME="month">
<Option value=0>1</Option>
<Option value=1>2</Option>
<Option value=2>3</Option>
<Option value=3>4</Option>
<Option value=4>5</Option>
<Option value=5>6</Option>
<Option value=6>7</Option>
<Option value=7>8</Option>
<Option value=8>9</Option>
<Option value=9>10</Option>
<Option value=10>11</Option>
<Option value=11>12</Option>
</SELECT>

Year <SELECT NAME="year">
<Option value=0>2004</Option>
<Option value=1>2005</Option>
<Option value=2>2006</Option>
<Option value=3>2007</Option>
<Option value=4>2008</Option>
<Option value=5>2009</Option>
</SELECT>

<INPUT type="submit" value="Go!!" onClick="">

</FORM>
</html>

I am sorry but i am new in javascripts... I don t know even the variables to fix...I think i should define the variables day, month year, date, and then call a function with the onClick in submit button....
Could you help me?

delgado · April 25th, 2009, 09:03 AM

I think that this is close enough......But so far didnt managed to pass the variable myDate to the window.location.href which is in the function.....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
window.location.href="pm10/+myDate+.png"

alert('You Selected: ' +myDate)

}

</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="1">1</Option>
<Option value="2">2</Option>
<Option value="3">3</Option>
<Option value="4">4</Option>
<Option value="5">5</Option>
<Option value="6">6</Option>
<Option value="7">7</Option>
<Option value="8">8</Option>
<Option value="9">9</Option>
<Option value="10">10</Option>
<Option value="11">11</Option>
<Option value="12">12</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>

Any idea or comments would be appreciated.......