[SOLVED] Javascript variables and forms

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
charp
Forum Commoner
Posts: 85
Joined: Sun Oct 26, 2003 3:00 pm
Location: Rancho Cucamonga, Calif. USA

[SOLVED] Javascript variables and forms

Post by charp »

I'm never going to be mistaken for a JavaScript guru, so bear with me please...

I'm trying to grab a value (a date) from an input field and use it in another bit of script, but I'm not sure this is even possible. Here's what I've managed (badly) on my own so far:

Code: Select all

var date1 = document.adder.dateStart.value;
I think the above is supposed to set the variable date1 equal to the value in the input field with the name="dateStart". Now I'd like to use the value of date1 here:

Code: Select all

calEnd.addDisabledDates(null,&quote;date1&quote;);
The above bit is from a much larger script that is customizable. By inserting a date in place of "date1", a range of dates are disabled in a popup calendar.

To keep it simple, I posted a minimum of code -- but hopefully enough. Please let me know if more code is required.

I'm a JavaScript rookie, so any and all help is appreciated.
Last edited by charp on Thu Jun 09, 2005 12:10 am, edited 1 time in total.
wyred
Forum Commoner
Posts: 86
Joined: Mon Dec 20, 2004 1:59 am
Location: Singapore

Post by wyred »

Remove the double quotes around date1. The quotes there makes it a string instead of a variable.
User avatar
charp
Forum Commoner
Posts: 85
Joined: Sun Oct 26, 2003 3:00 pm
Location: Rancho Cucamonga, Calif. USA

Post by charp »

wyred,

Thanks for the reply. I tried your suggestion with no luck. Problem is that I'm not certain I've actually set the variable equal to anything at all. Perhpas a bit more explanation will help...

The date I'm trying to use is from an input field that is populated by a JavaScript popup calendar -- I'm sure everyone has seen these popup calendars that make date selection so convenient. So, the input field is empty to begin with.

After a start date is selected, I managed to use that CSS visibility thingee to make a second input field appear (for the end date). Since the script I'm using for the popup calendar has a customizable feature that allows me to disable a date range, I'm trying to make it impossible for a user to select an end date that occurs before the start date. Did that make sense?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

well without seeing the addDisabledDates() function, it's hard to tell where the problem could be.

to determine if the date1 var is being set, just include this after you set it:

Code: Select all

alert(date1);
that will alert you with whatever the value of date1 is. If it has the value you expect, then there's somethign wrong with the addDisabledDates() function or you're not passing it the correct information.
User avatar
charp
Forum Commoner
Posts: 85
Joined: Sun Oct 26, 2003 3:00 pm
Location: Rancho Cucamonga, Calif. USA

Post by charp »

I think the function is working correctly. When I code it this way:

Code: Select all

calEnd.addDisabledDates(null,&quote;06/15/05&quote;);
The dates up through June 15 are properly disabled. Here's the first bit of code where the start date gets set:

Code: Select all

echo '<td>
<script language="JavaScript" id="jsStart">
var now = new Date();
var calStart = new CalendarPopup("caldiv");
calStart.addDisabledDates(null,"'.$start_limit.'");
calStart.addDisabledDates("'.$end_limit.'",null);
calStart.setDisabledWeekDays(0,6);
</script>
First Day: <input type="text" name="dateStart" value="'.$dateStart.'" size="8">

<a href="#" onClick="calStart.select(document.forms[\'adder\'].dateStart,\'anchorStart\',\'MM/dd/yy\');
return false;" name="anchorStart" id="anchorStart">
<img src="images/calendar.gif" width="16" height="15" border="0" alt="" align="top" vspace="3"/></a>

</td>';
$start_limit and $end_limit are PHP variables I set earlier in the page. They're working perfectly.

All of the onClick stuff in the anchor tag goes to the external JavaScript file, which is the heart of the popup calendar script. It's the value that this script inserts into the input field that I want to use in the second instance of the popupcalendar.

Almost forgot to add that I tried the alert(date1) suggestion and got zip. I assume this means I'm not passing any value in that variable. Then again, it could be the way this script works with the actual calendar popping up in a tiny window. Earlier I tried:

Code: Select all

document.write(date1);
Nothing happended then either.

Any ideas? Or should I point you to the javascript source for this popup calendar?

Thanks again!

++++++UPDATE+++++

Actually, the alert box does pop up as soon as the page loads, but the value is not displayed. But then I'm thinking that makes perfect sense since date1 won't get a value until after the user selects a start date. And that's the part I'm not sure is possible. Can I grab the value of that input field after a start date is selected? Can JavaScript do that?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

are you doing this:

Code: Select all

var date1 = document.adder.dateStart.value;
inside of a function or just on the page load? If the latter, it won't get set to anything because as you suggested, you need to select the start date first. If it's not inside of a function, I would write a quick function to set the date then call the calendar function to show the "acceptable" dates.

ex:

Code: Select all

<script>
function showAcceptables(){
  var date1 = document.adder.dateStart.value;
  calendarCallerFunction(null,date1);
}
</script>
then call that function with a span or href or whatever you want:

Code: Select all

<span id=&quote;enddate&quote; onClick=&quote;showAcceptables()&quote;><img src=&quote;calendar.gif&quote;></span>
User avatar
charp
Forum Commoner
Posts: 85
Joined: Sun Oct 26, 2003 3:00 pm
Location: Rancho Cucamonga, Calif. USA

Post by charp »

Yeehaw! It works. Thank you so very much Burrito!

Making the function was the trick. Now that I have it all laid out in front of me, it's seems so straight forward. Here's the function I ended up with:

Code: Select all

<script language=&quote;JavaScript&quote;>
function showAcceptables(){
   var date1 = document.adder.dateStart.value;
   var date1_array=date1.split(&quote;/&quote;);
   var days = parseInt(date1_array&#1111;1]) + 16;
   var date2 = date1_array&#1111;0]+&quote;/&quote;+days+&quote;/&quote;+date1_array&#1111;2];
   calEnd.addDisabledDates(null,date1);
   calEnd.addDisabledDates(date2,null);
}
I added a bit more so that I could limit the range of available dates to 15 days. After a quick search with Google, I found that split function to break up the date1 value, which is in the MM/DD/YY format. If you can see an easier way to accomplish this, I love to see it.

My next step is to add some additional functionality -- if the user selects a new start date, I want the end date field to clear in order to force the user to select a new end date as well. First I'll give this a go on my own, but I'll probably end up here again.

Again, thanks for the help. Your efforts are well appreciated.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

using split() just creates an array...it's the equivalent of explode() in php.

your method will only work if the days don't extend beyond the end of the month.

for example let's say the begin date was 04/04/2005, you add 15 days and you have 04/19/2005...all is good. But now let's say the begin date was 04/22/2005 you add 15 days you have 04/37/2005...huh?

you need to actually use a "date" object to add days. There are a few different ways to do it and I'm not suggesting that my way is the best, but it will work for you. You could parse your date1 var into a date and add days then strip out the day, month and year and put them back into a mm/dd/yyyy format:

ex:

Code: Select all

var date1 = &quote;04/22/2005&quote;;
myDate = new Date(date1)
myDate.setDate(myDate.getDate() + 15);
month = myDate.getMonth() + 1; // have to add 1 here because months in JS are 0 based...dumb I know, but I'm just a burrito :P
day = myDate.getDate();
year = myDate.getYear();
alert(month+&quote;/&quote;+day+&quote;/&quote;+year);
User avatar
charp
Forum Commoner
Posts: 85
Joined: Sun Oct 26, 2003 3:00 pm
Location: Rancho Cucamonga, Calif. USA

Post by charp »

Yup. I figured out there was a problem with my method about 15 minutes after I made that last post. And I thought I was so clever for finding that split function...thanks for setting me straight on that detail as well. Guess I'm just going to have to commit myself to a little book time to properly teach myself JavaScript instead of just cobbling together bits and pieces I don't really understand.
Post Reply