Verifying data in dynamically generated text boxes

Discussion in 'Javascript' started by Sethos, Mar 6, 2006.

  1. Sethos

    Sethos Guest

    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
     
    Sethos, Mar 6, 2006
    #1
    1. Advertising

  2. Sethos

    RobG Guest

    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.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.).



    --
    Rob
     
    RobG, Mar 7, 2006
    #2
    1. Advertising

  3. Sethos

    Sethos Guest

    Rob - Thanks, that makes sense now that I see it!
     
    Sethos, Mar 7, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Stefan Mueller
    Replies:
    5
    Views:
    12,405
    jamesxa
    Jun 16, 2009
  2. Replies:
    5
    Views:
    498
    Eliyahu Goldin
    Sep 3, 2006
  3. Keefe Goldfisher via .NET 247

    Sizing text entry boxes on in-place editing of datagrid row with dynamically created columns

    Keefe Goldfisher via .NET 247, Mar 7, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    182
    Keefe Goldfisher via .NET 247
    Mar 7, 2005
  4. KathyB
    Replies:
    3
    Views:
    162
    KathyB
    Sep 12, 2003
  5. juglesh
    Replies:
    7
    Views:
    172
    Thomas 'PointedEars' Lahn
    May 8, 2005
Loading...

Share This Page