Javascript Validation of dynamic fields.

Associate
Joined
28 Nov 2004
Posts
1,237
Location
Birmingham
Hi guys,
This is a weird little problem.

I have a form which is doing a few different things.

Basically, it is a booking form and the user selects the number of bookings from a drop down menu. When they do this, I am dynamically creating a group of date form elements to correspond with the number they select.

So, selecting 2 bookings creates the following drop down date selectors in a div tag on my page:

day1 / month1 / year1
day2 / month2 / year2

Now, I need to make sure (in certain circumstances) that the dates selected here are in the past.
When I submit my form, I've managed to loop through each form element and the elements I've dynamically created above are alerted to me. Here's the code I used for that:

Code:
for(j=0; j<document.forms[0].elements.length; j++){
	alert(document.forms[0].elements.name);
}

Now, the problem I'm having is that I need to get the selected value of each of the aformentioned elements but they come back as nothing, nada, zip!!!
To do this, I said:
Code:
for(j=0; j<document.forms[0].elements.length; j++){
	if(document.forms[0].elements[j].name=='p_day1') {
		alert(document.forms[0].elements[j].value);
	} 
}

Why are the values blank? Is it because the form elements are dynamic so somehow not 'really there' until the page is submitted? If it can find the form element, I can't see why it can't see its value.

I know I've done something silly here so please put me out of my misery!

Thanks in advance.
 
Ok, here is the code that is called when the booking number is selected. It all seems to work ok and the DB insert is fine when the form is submitted.
I've stripped out the DB stuff used for updating as it's the insert i'm worries about at the mo...
Code:
var d = new Date();
for(i=1; i!=(parseInt(sCount)+1); i++) { 
	strHTML=strHTML+"<tr><td class='header' width='204'><b>&nbsp;Shift " + i + "</td><td class='content'>";
	strHTML=strHTML+"<select id='p_day" + i + "' name='p_day" + i + "'>";
	for(x=1; x!=32; x++) {
		strHTML=strHTML+"<option ='" + pad(x,2) + "'>" + pad(x,2) + "</option>";
	}
	strHTML=strHTML+"</select>&nbsp;"
	strHTML=strHTML+"<select id='p_month" + i + "' name='p_month" + i + "'>";
	for(mnth=1; mnth!=13; mnth++) { 
		strHTML=strHTML+"<option ='" + pad(mnth,2) + "'>" + pad(mnth,2) + "</option>";
	}
	strHTML=strHTML+"</select>&nbsp;"
	strHTML=strHTML+"<select id='p_year" + i + "' name='p_year" + i + "'>";
	for(x=parseInt(d.getYear())-2; x!=parseInt(d.getYear())+3; x++) {
		strHTML=strHTML+"<option ='" + pad(x,2) + "'>" + pad(x,2) + "</option>";
	}
	strHTML=strHTML+"</select>&nbsp;&nbsp;"
	strHTML=strHTML+"<select id='p_startTime" + i + "' name='p_startTime" + i + "'>";
	for(x=0; x!=24; x++) {
		for(y=0; y!=60; y=y+30) {
	 strHTML=strHTML+"<option ='" + pad(x,2) + ":" + pad(y,2) + "'>" + pad(x,2) + ":" + pad(y,2) + "</option>";
		}
	}
	strHTML=strHTML+"</select>&nbsp;To&nbsp;"
	strHTML=strHTML+"<select id='p_endTime" + i + "' name='p_endTime" + i + "'>";
	for(x=0; x!=24; x++) {
		for(y=0; y!=60; y=y+30) {
		 strHTML=strHTML+"<option ='" + pad(x,2) + ":" + pad(y,2) + "'>" + pad(x,2) + ":" + pad(y,2) + "</option>";
		}
	 }
	 strHTML=strHTML+"</select>&nbsp;&nbsp;" ;
}
strHTML="<table cellpadding=0 cellspacing=1 border=0 width='100%'>" + strHTML + "</table>";
document.getElementById("details").innerHTML = strHTML;
document.getElementById("details").style.display='block';

When the form is submitted, I am basically trying to check each date element like this:

Code:
'count' is the number of bookings selected by the user.
 
var dtDay;
var dtMonth;
var dtYear;
 
for(var i=1; i==count; i++) {
for(j=0; j<document.forms[0].elements.length; j++){
if(document.forms[0].elements[j].name=='p_day'+i) {
dtDay=document.forms[0].elements[j].value;
}
if(document.forms[0].elements[j].name=='p_month'+i) {
dtMonth=document.forms[0].elements[j].value;
}
if(document.forms[0].elements[j].name=='p_year'+i) {
dtYear=document.forms[0].elements[j].value;
}
//build date and check it isn't in the future....
//but the date values are blank!!
}
}
 
Back
Top Bottom