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!

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

Referring to form elements via javascript variables 1

Status
Not open for further replies.
mtorbin

mtorbin

Technical User
Nov 5, 2002
369
US
Hey all,

I'm having a lot of trouble with the following:

Code: 
function buildPage(formName,monthName,dayName,yearName) {

    formName = document.formName;
    monthName = document.formName.monthName;
    dayName = document.formName.dayName;
    yearName = document.formName.yearName;

    alert(formName);
}
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="dateListBoxes_ext.js"></script>
</head>

<body onLoad="buildPage('myForm','theMonth','theDay','theYear');">
<form name="myForm" id="myForm">
<table width="25%" border="0" cellpadding="2" cellspacing="0">
 <tr align="center">
  <td width="33%">
    <select name="theMonth" onChange="changeDate(this.value)"></select>
	</td>
	<td width="33%">
    <select name="theDay"></select>    
   </td>
    <td width="33%">
	<select name="theYear"></select>
	</td>
 </tr>
 </table>
</form>
</body>
</html>

Why am I getting "... has no properties."?

Thanks,

- MT

Matt Torbin
Center City Philadelphia Macintosh Users Group

ichat/aim: mtorbin_at_mac.com
direct email: mtorbin_at_mac.com
 
Sort by date Sort by votes
You can't do it the way you're trying. You need to use the forms and elements collections. Like this:
Code: 
function buildPage(formName,monthName,dayName,yearName) {

    formName = document.forms[formName];
[gray][i]//no need to put "document" in the following lines
//because "formName" directly references the form object now[/i][/gray]
    monthName = formName.elements[monthName];
    dayName = formName.elements[dayName];
    yearName = formName.elements[yearName];
[gray][i]//not sure exactly what you're expecting from this line
//you will likely get [object] from this alert since formName is
//an object reference[/i][/gray]
    alert(formName);
}

On a side note..... I took a look at your profile and it shows that you have started over 100 threads here at TT, but have never once given any votes for tipmaster of the week. It's something easily overlooked with new members of the site, since they are probably not familiar with the way the site works. However, after spending as much time here at the site as you surely have, you should be aware of the "purple star" system. The "thank xxxxx for this valuable post!" link has appeared on every post that someone has given to answer your questions. If nothing else, one would think that you would have clicked it at least once just out of curiosity after asking 107 questions.... Awarding stars is a courteous way to say thanks for the help given to you here at TT.

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Kaht,

My appologies. I'll try to be more considerate.

- MT

Matt Torbin
Center City Philadelphia Macintosh Users Group

ichat/aim: mtorbin_at_mac.com
direct email: mtorbin_at_mac.com
 
Upvote 0 Downvote
Thanks, but you don't have to apologize to me. [smile]

I was just giving you a reminder for your benefit. Seeing a profile that asks a lot of questions and provides little answers or awards few stars can often draw negative attention from site admins.

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Unfortunately, I am still getting the same errors:

Code: 
// Dynamic Date List Boxes
var i;
var today = new Date();
var currentYear = today.getYear();
var currentMonth = today.getMonth();
var currentDay = today.getDate();

var months = new Array();
    months[0] = "january";
	months[1] = "february";
	months[2] = "march";
	months[3] = "april";
	months[4] = "may";
	months[5] = "june";
	months[6] = "july";
	months[7] = "august";
	months[8] = "september";
	months[9] = "october";
	months[10] = "november";
	months[11] = "december";
	
var years = new Array();
    years[0] = "2001";
	years[1] = "2002";
	years[2] = "2003";
	years[3] = "2004";
	years[4] = "2005";
	years[5] = "2006";
	years[6] = "2007";

function formatYear(digit) {
	var browser = navigator.appName;
	var correctYear = digit;
	
	if(browser == "Netscape") {
	    correctYear = correctYear + 1900;
	}
	return correctYear;
}

function buildMonthSelect(formName,monthName) {
    for(i = 0; i < months.length; i++) {
	    document.formName.monthName.options[i] = new Option(months[i].toUpperCase(),i+1);
		if (i == currentMonth) {
		    document.formName.monthName.options[i].selected = true;
		}
	}
}

function buildDaySelect(formName,dayName) {
    for(i = 1; i < 32; i++) {
	    document.formName.dayName.options[i] = new Option(i,i);
	    if (i == currentDay) {
			 document.formName.dayName.options[i].selected = true;
	     }
	}
}

function buildYearSelect(formName,yearName) {
    for(i = 0; i < years.length; i++) {
	    document.formName.yearName.options[i] = new Option(years[i],years[i]);
		if (years[i] == formatYear(currentYear)) {
			 document.formName.yearName.options[i].selected = true;
	    }
	}
}

function buildPage(formName,monthName,dayName,yearName) {
	formName = document.forms[formName];
    monthName = formName.elements[monthName];
    dayName = formName.elements[dayName];
    yearName = formName.elements[yearName];
	
    buildMonthSelect(formName,monthName);
	buildDaySelect(formName,dayName);
	buildYearSelect(formName,yearName);
}

function changeDate(selectedMonth) {
	switch(selectedMonth) {
		case "1":
		   createOptions(31);
		   break;
		case "2":
		   createOptions(28);
		   break;
		case "3":
		   createOptions(31);
		   break;
	    case "4":
		   createOptions(30);
		   break;
		case "5":
		   createOptions(31);
		   break;
		case "6":
		   createOptions(30);
		   break;
	    case "7":
		   createOptions(31);
		   break;
		case "8":
		   createOptions(31);
		   break;
	    case "9":
		   createOptions(30);
		   break;
		case "10":
		   createOptions(31);
		   break;
	    case "11":
		   createOptions(30);
		   break;
		case "12":
		   createOptions(31);
		   break;
	}
}


function createOptions(numberOfDays) {
     document.formName.dayName.options.length = 0;
     for(var i = 1; i <= numberOfDays; i++) {
	     document.formName.dayName.options[i] = new Option(i,i);
	     if (i == 1) {
			 document.formName.dayName.options[i].selected = true;
	     }
	 }
	 return;
}

The above is the full script. Any ideas?

- MT

Matt Torbin
Center City Philadelphia Macintosh Users Group

ichat/aim: mtorbin_at_mac.com
direct email: mtorbin_at_mac.com
 
Upvote 0 Downvote
You're making the same mistake I pointed out above in a previous comment. Since you have an object reference to your form, you don't need to use "document" when referencing the form elements:
Code: 
function buildMonthSelect(formName,monthName) {
    for(i = 0; i < months.length; i++) {
        [!]document.formName.monthName[/!].options[i] = new Option(months[i].toUpperCase(),i+1);
        if (i == currentMonth) {
            [!]document.formName.monthName[/!].options[i].selected = true;
        }
    }
}

function buildDaySelect(formName,dayName) {
    for(i = 1; i < 32; i++) {
        [!]document.formName.dayName[/!].options[i] = new Option(i,i);
        if (i == currentDay) {
             [!]document.formName.dayName[/!].options[i].selected = true;
         }
    }
}

function buildYearSelect(formName,yearName) {
    for(i = 0; i < years.length; i++) {
        [!]document.formName.yearName[/!].options[i] = new Option(years[i],years[i]);
        if (years[i] == formatYear(currentYear)) {
             [!]document.formName.yearName[/!].options[i].selected = true;
        }
    }
}

Your variable names are misleading as well.... the variables you're passing aren't names, they are pointers to the element objects. I'd rewrite your code like this:
Code: 
function buildMonthSelect([!]monthObj[/!]) {
    for(i = 0; i < months.length; i++) {
        [!]monthObj[/!].options[i] = new Option(months[i].toUpperCase(),i+1);
        if (i == currentMonth) {
            [!]monthObj[/!].options[i].selected = true;
        }
    }
}

function buildDaySelect([!]dayObj[/!]) {
    for(i = 1; i < 32; i++) {
        [!]dayObj[/!].options[i] = new Option(i,i);
        if (i == currentDay) {
             [!]dayObj[/!].options[i].selected = true;
         }
    }
}

function buildYearSelect([!]yearObj[/!]) {
    for(i = 0; i < years.length; i++) {
        [!]yearObj[/!].options[i] = new Option(years[i],years[i]);
        if (years[i] == formatYear(currentYear)) {
             [!]yearObj[/!].options[i].selected = true;
        }
    }
}

function buildPage(formName,monthName,dayName,yearName) {
    [!]var formObj[/!] = document.forms[formName];
    [!]var monthObj[/!] = [!]formObj[/!].elements[monthName];
    [!]var dayObj[/!] = [!]formObj[/!].elements[dayName];
    [!]var yearObj[/!] = [!]formObj[/!].elements[yearName];
    
    buildMonthSelect([!]monthObj[/!]);
    buildDaySelect([!]dayObj[/!]);
    buildYearSelect([!]yearObj[/!]);
}

You should try getting away from the whole document.formName.elementName schema, it throws up warnings in the javascript console in firefox, and is unclean.

There may be more typing involved, but it's cleaner and easier to understand using the forms and elements collections. And you don't step on any toes when you use reserved javascript keywords as HTML element names:
document.forms["myForm"].elements["myElement"]

Or use the W3C suggested getElementById

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
626
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
255
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
613
JScannell
JScannell
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
753
Kennelbloke
Kennelbloke

Part and Inventory Search

Sponsor

Back
Top