Verifying data in dynamically generated text boxes

[Sethos]

I am sure that this has been covered, hashed, and rehashed, but a
search on the group did not produce the answer, so forgive me if this
seems like a "newbie" type question...

Besically, I have a form on which the users can click on a button to
add text boxes dynamically. That all works without a hitch. The problem
comes in trying to verify the information in the boxes.

Below is a very abbreviated example of the code I have in the form:

function addFloorPlan() {
var d = document.getElementById( 'floorplan' );
var table = document.getElementById( 'planTbl' );
var element = table.cloneNode(true)
d.appendChild( element );
}

function checkAptComplex(form) {
var fld = form.FloorPlanName.value;
if (fld == '') {
alert('Bad Floor Plan Name');
return false;
}
return true;
}

<!-- stuff deleted to conserve space -->
<form .... onSubmit='return checkAptComplex(this)' >
<!-- stuff deleted to conserve space -->
<div id="floorplan">
<table border="0" cellpadding="0" cellspacing="2" width="100%"
id="planTbl">
<tr valign="top">
<td class="label" width="130">Floor Plan Name</td>
<td class="data">
<input name="FloorPlanName" type="text" size="50"
maxlength="40" value="No Name" /></td>
</tr>
<tr valign="top">
<td class="label" width="130">Description</td>
<td class="data">
<input name="FloorPlanText" type="text" size="50" maxlength="100"
value="." /></td>
</tr>
<tr valign="top">
<td class="label" width="130">Beds¹</td>
<td class="data">
<input name="NoBeds" type="text" size="10" maxlength="2"
class="required" />
</td>
</tr>
<tr valign="top">
<td class="label" width="130">Baths</td>
<td class="data">
<input name="NoBaths" type="text" size="10" maxlength="2"
class="required" />
</td>
</tr>
<tr valign="top">
<td class="label" width="130">Half-Baths</td>
<td class="data"><input name="NoHalfBaths" type="text" size="10"
maxlength="2" /></td>
</tr>
<tr valign="top">
<td class="label" width="130">Square Feet</td>
<td class="data"><input name="SquareFeet" type="text" size="10"
/></td>
</tr>
<tr valign="top">
<td class="label" width="130">Rent²</td>
<td class="data">
<input name="Rent" type="text" size="10" class="required" /></td>
</tr>
<tr valign="top">
<td class="label" width="130">Deposit²</td>
<td class="data">
<input name="Deposit" type="text" size="10" class="required"
/></td>
</tr>
<tr valign="top">
<td class="label" width="130">Availability</td>
<td class="data">
<select name="Status">
<option value="1">None Currently Available</option>
<option value="2" selected="selected">Units Available
Now</option>
<option value="3">Call For Availability</option>
</select>
</td>
</tr>
</table>
</div>
<!-- stuff deleted to conserve space -->
</form>

When I go to verify the form fields, if there is more than a single
entry for each field (for example: FloorPlanName) then the script
returns the error "object not defined" (or something similar). If there
is a single entry, no problem - the script finishes and the form is
submitted. I need to be able to "test" for each possibility and also
test the value to confirm the entry is within allowed parameters.

Am I missing something simple?

Thanks in advance!
Timothy

 

[RobG]

I am sure that this has been covered, hashed, and rehashed, but a
search on the group did not produce the answer, so forgive me if this
seems like a "newbie" type question...

Yes, it's been covered before, but there you go...

Besically, I have a form on which the users can click on a button to
add text boxes dynamically. That all works without a hitch. The problem
comes in trying to verify the information in the boxes.

Below is a very abbreviated example of the code I have in the form:

function addFloorPlan() {
var d = document.getElementById( 'floorplan' );
var table = document.getElementById( 'planTbl' );
var element = table.cloneNode(true)
d.appendChild( element );
}

function checkAptComplex(form) {
var fld = form.FloorPlanName.value;
if (fld == '') {
alert('Bad Floor Plan Name');
return false;
}
return true;
}

<!-- stuff deleted to conserve space -->
<form .... onSubmit='return checkAptComplex(this)' >
<!-- stuff deleted to conserve space -->
<div id="floorplan">
<table border="0" cellpadding="0" cellspacing="2" width="100%"
id="planTbl">
<tr valign="top">
<td class="label" width="130">Floor Plan Name</td>
<td class="data">
<input name="FloorPlanName" type="text" size="50"
maxlength="40" value="No Name" /></td>
[...]

</table>
</div>
<!-- stuff deleted to conserve space -->
</form>

When I go to verify the form fields, if there is more than a single
entry for each field (for example: FloorPlanName) then the script
returns the error "object not defined" (or something similar). If there
is a single entry, no problem - the script finishes and the form is
submitted. I need to be able to "test" for each possibility and also
test the value to confirm the entry is within allowed parameters.

Am I missing something simple?

When you clone the table and its contents, you create another instance
of the input named 'FloorPlanName'. When you add it to the document as
a child of the 'floorplan' div (which is a child of a form), it becomes
a form control within the form.

When you write:

var fld = form.FloorPlanName.value;


where form is a reference to a form and 'FloorPlanName' is the name of a
control within the form, if only one control is named 'FloorPlanName'
then 'form.FloorPlanName' will return a reference to that control and
'fld' will be given the value of its value.

However, if there are two or more controls with a name of
'FloorPlanName', then 'form.FloorPlanName' will return a collection
object, which doesn't have a 'value' property by default and attempting
to access it will cause an error.

When you clone the table and add it to the div, the form now has two (or
more) controls called 'FloorPlanName'. So now when you execute:

var fld = form.FloorPlanName; // Note removal of '.value'


fld refers to a *collection* of the controls called 'FloorPlanName'. So
what you have to do is check fld to see whether you have a single
element or a collection. If it's a collection[1], you'll have to loop
through the elements, e.g.

function checkAptComplex(form)
{
// Local test function
var testValue = function (v) {
if (0 == v.length) {
alert('Bad Floor Plan Name');
return false;
}
return true;
}

var fld;
if (form && (fld = form.FloorPlanName) ){
if (fld.length) {

// fld is a collection, loop through elements
for (var i=0, len=fld.length; i<len; ++i){
if (! testValue(fld.value) ) {
if (fld.focus) fld.focus();
return false;
}
}
} else {

// fld is a single element...
if (! testValue(fld.value) ) return false;
}
return true;
}
}




You may want to give a hint as to which FloorPlanName is 'bad'. The
above will show an alert for the first 'bad' entry, focus on it, then
cancel the submit. You may want to make the test a bit more
sophisticated, such as checking for the presence or absence of certain
characters or range of characters.


1. A collection is like an array, it has a self-adjusting length
property and you can access the elements by index but it doesn't have
the special methods of an array (join, pop, split, etc.).

 

[Sethos]

Rob - Thanks, that makes sense now that I see it!