Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Verifying data in dynamically generated text boxes

Reply
Thread Tools

Verifying data in dynamically generated text boxes

 
 
Sethos
Guest
Posts: n/a
 
      03-06-2006
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

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      03-07-2006
Sethos wrote:
> 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[i].value) ) {
if (fld[i].focus) fld[i].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.).



--
Rob
 
Reply With Quote
 
 
 
 
Sethos
Guest
Posts: n/a
 
      03-07-2006
Rob - Thanks, that makes sense now that I see it!

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Space between input boxes and selection boxes is not the same in Internet Explorer Stefan Mueller HTML 5 06-16-2009 02:06 PM
get content of text boxes dynamically created tarscher@gmail.com ASP .Net 5 09-03-2006 08:47 AM
sort items like Netflix - dynamically change text boxes or select fields juglesh Javascript 7 05-08-2005 02:40 PM
Sizing text entry boxes on in-place editing of datagrid row with dynamically created columns Keefe Goldfisher via .NET 247 ASP .Net Datagrid Control 0 03-07-2005 07:00 PM
Possible to check for empty input boxes when names generated dynamically? KathyB Javascript 3 09-12-2003 09:40 PM



Advertisments