Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

undefined id

Status
Not open for further replies.

rkoya

IS-IT--Management
Jul 12, 2004
57
0
0
GB
Hi,

I have the following javascript code, however when updateCal2 is called, Firefox says that FARRetMonth is undefined. As you can see it is defined. Can anyone give me a suggestion



<script>
YAHOO.namespace("example.calendar");

function handleSelect(type,args,obj) {

var dates = args[0];
var date = dates[0];
var year = date[0], month = date[1], day = date[2];

var depmonth=document.getElementById("FARDepMonth");
var depdate=document.getElementById("FARDepDay");

depmonth.selectedIndex=month-1;
depdate.selectedIndex=day-1;

updateCal2();
minimumdate();
showCalendar3();
}



function updateCal() {
var depmonth = document.getElementById("FARDepMonth");
var depdate = document.getElementById("FARDepDay");

var month = parseInt(FARDepMonth.options[FARDepMonth.selectedIndex].value);
alert(value);
var day = parseInt(FARDepDay.options[FARDepDay.selectedIndex].value);


if (! isNaN(month) && ! isNaN(day)) {
var date = month + "/" + day;

YAHOO.example.calendar.cal1.select(date);
YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", month);
YAHOO.example.calendar.cal1.render();
}
}

function handleSelect1(type,args,obj) {

var dates = args[0];
var date = dates[0];
var year = date[0], month = date[1], day = date[2];

var depmonth=document.getElementById("FARRetMonth");
var depdate=document.getElementById("FARRetDay");

depmonth.selectedIndex=month;

depdate.selectedIndex=day;

showCalendar4();
}

function updateCal2() {
var depmonth = document.getElementById("FARRetMonth");
var depdate = document.getElementById("FARRetDay");

var month = parseInt(FARRetMonth.options[FARRetMonth.selectedIndex].value);
alert(month);
var day = parseInt(FARRetDay.options[FARRetDay.selectedIndex].value);


if (! isNaN(month) && ! isNaN(day)) {
var date = month + "/" + day;

YAHOO.example.calendar.cal2.select(date);
YAHOO.example.calendar.cal2.cfg.setProperty("pagedate", month);
YAHOO.example.calendar.cal2.render();
}
}



function minimumdate() {
var depmonth=document.getElementById("FARDepMonth");
var depdate=document.getElementById("FARDepDay");

var month = parseInt(FARDepMonth.options[FARDepMonth.selectedIndex].value);
var day = parseInt(FARDepDay.options[FARDepDay.selectedIndex].value);


if (! isNaN(month) && ! isNaN(day)) {
var date = month + "/" + day;
YAHOO.example.calendar.cal2.cfg.setProperty("mindate", date );
YAHOO.example.calendar.cal2.render();
}
}






function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container" );
YAHOO.example.calendar.cal1.cfg.setProperty("mindate", YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1));
YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.render();

YAHOO.util.Event.addListener("update", "change", updateCal);
YAHOO.util.Event.addListener("showup", "click", YAHOO.example.calendar.cal1.show, YAHOO.example.calendar.cal1, true);



YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal2","cal2Container" );
YAHOO.example.calendar.cal2.cfg.setProperty("mindate", YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1));
YAHOO.example.calendar.cal2.selectEvent.subscribe(handleSelect1, YAHOO.example.calendar.cal2, true);
YAHOO.example.calendar.cal2.render();

YAHOO.util.Event.addListener("update", "change", updateCal2);
YAHOO.util.Event.addListener("showup", "click", YAHOO.example.calendar.cal2.show, YAHOO.example.calendar.cal2, true);

}

function showCalendar1() {
YAHOO.example.calendar.cal1.show();
document.getElementById('calendarBoxDepart').style.display='block';
}

function showCalendar2() {
YAHOO.example.calendar.cal2.show();
document.getElementById('calendarBoxReturn').style.display='block';
YAHOO.example.calendar.cal1.hide();
document.getElementById('calendarBoxDepart').style.display='none';
}

function showCalendar3() {
YAHOO.example.calendar.cal1.hide();
document.getElementById('calendarBoxDepart').style.display='none';
}

function showCalendar4() {
YAHOO.example.calendar.cal2.hide();
document.getElementById('calendarBoxReturn').style.display='none';
}


YAHOO.util.Event.addListener(window, "load", init);
</script>



<tr>

<td width="130" align="right" nowrap><b>Outbound:</b> </td>
<td nowrap><select name="FARDepDay" id="FARDepDay" size="1" class=""><option value="1">1st</option><option value="2">2nd</option><option value="3">3rd</option><option value="4">4th</option><option value="5">5th</option><option value="6">6th</option><option value="7">7th</option><option value="8">8th</option><option value="9">9th</option><option value="10">10th</option><option value="11">11th</option><option value="12">12th</option><option value="13">13th</option><option value="14">14th</option><option value="15">15th</option><option value="16">16th</option><option value="17">17th</option><option selected="selected" value="18">18th</option><option value="19">19th</option><option value="20">20th</option><option value="21">21st</option><option value="22">22nd</option><option value="23">23rd</option><option value="24">24th</option><option value="25">25th</option><option value="26">26th</option><option value="27">27th</option><option value="28">28th</option><option value="29">29th</option><option value="30">30th</option><option value="31">31st</option></select><select name="FARDepMonth" id="FARDepMonth" size="1" class=''><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option selected="selected" value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>



<a href="javascript:;" onClick="showCalendar1();">
<img name="imgCalendarLatTicket" alt="Departure Date" src="calendar.gif" border="0" width="34" height="21" align="absmiddle"></a>
</td></tr>

<p>&nbsp;</p>

<tr>
<td width="130" align="right" nowrap><b>Return: </b></td>
<td nowrap><select name="FARRetDay" id="FARRetDay" size="1" class=""><option value=""></option><option value="1">1st</option><option value="2">2nd</option><option value="3">3rd</option><option value="4">4th</option><option value="5">5th</option><option value="6">6th</option><option value="7">7th</option><option value="8">8th</option><option value="9">9th</option><option value="10">10th</option><option value="11">11th</option><option value="12">12th</option><option value="13">13th</option><option value="14">14th</option><option value="15">15th</option><option value="16">16th</option><option value="17">17th</option><option value="18">18th</option><option value="19">19th</option><option value="20">20th</option><option value="21">21st</option><option value="22">22nd</option><option value="23">23rd</option><option value="24">24th</option><option value="25">25th</option><option selected="selected" value="26">26th</option><option value="27">27th</option><option value="28">28th</option><option value="29">29th</option><option value="30">30th</option><option value="31">31st</option></select><select name="FARRetMonth" id="FARRetMonth" size="1" class=""><option value=""></option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option selected="selected" value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>



<a id="CalendarRetDate" href="javascript:;" onclick="showCalendar2();">
<img id="imgCalendarLatTicket" name="imgCalendarLatTicket" alt="Return Date" src="calendar.gif" border="0" width="34" height="21" align="absmiddle"></a>

</td>
</tr>
 
Code:
function updateCal2() {
        var depmonth = document.getElementById("FARRetMonth");
        var depdate = document.getElementById("FARRetDay");

        var month = parseInt(FARRetMonth.options[FARRetMonth.selectedIndex].value);
You're referencing an element directly, instead of via the reference that you have stored above.
 
right I have tried to reference the element using the stored variable but it still does not work
 
you've tried...

Code:
var depmonth = document.getElementById("FARRetMonth");
var depdate = document.getElementById("FARRetDay");

var month = parseInt(depmonth.options[depmonth.selectedIndex].value);

and it doesn't work?

next step is to validate your code using validator.w3.org. make sure you only have one element with that ID.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top