473,320 Members | 1,900 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Verifying data in dynamically generated text boxes

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

Mar 6 '06 #1
2 2098
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
Mar 7 '06 #2
Rob - Thanks, that makes sense now that I see it!

Mar 7 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: Gregory A Greenman | last post by:
I'm trying to write a program in vb.net to automate filling out a series of forms on a website. There are three forms I need to fill out in sequence. The first one is urlencoded. My program is...
0
by: IMRAN SAROIA | last post by:
Hi! Please advise what is the best practice for modifying and updating the many sides of relations. E.g., For orders , order detail side. I used to following approaches: 1) Gettting the...
8
by: Donald Xie | last post by:
Hi, I noticed an interesting effect when working with controls that are dynamically loaded. For instance, on a web form with a PlaceHolder control named ImageHolder, I dynamically add an image...
7
by: Andrew McKendrick | last post by:
Hi, I've noticed a bug in VB.NET (latest .NET Framework)... - I have a TabControl on a form with several tabs. - Each tab contains text boxes that are bound to fields in a data source...
27
by: ted benedict | last post by:
hi everybody, i hope this is the right place to discuss this weird behaviour. i am getting dynamically generated text or xml from the server side using xmlhttprequest. if the server side data is...
1
by: foothills bhc | last post by:
I have a problem with verifying content of controls on a form before closing the form or moving to the next form "record" (i.e., when moving to the next row of my form's record source). HERE'S THE...
1
by: vega80 | last post by:
Hi. I have a problem with assigning an onkeypress-function to dynamically created input-boxes.I want to put the content of an input-field into a tag-list when the user hits enter. This works...
9
by: Dahak | last post by:
I'm trying to generate dynamic functions to use as separate callbacks for an AJAX API call. The API doesn't seem to allow for the inclusion of any parameters in the callback, so I can't...
2
by: gubbachchi | last post by:
Hi, I have a form whose elements are created dynamically on selection, i.e. the form has only text boxes and the number of text boxes depends on the users selection, if user selects 3 then 3...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.