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<sup>1</sup></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<sup>2</sup></td>
<td class="data">
<input name="Rent" type="text" size="10" class="required" /></td>
</tr>
<tr valign="top">
<td class="label" width="130">Deposit<sup>2</sup></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