views:

27

answers:

0

I have a group of indexed input fields that contain an autocomplete text field that returns a list of names found in the database. The user can add as many "groups" as they need to, with each "group" containing a set of incremented indexed input fields. If the user begins typing, however, and ultimately enters a name that isn't found in the database, it will give them the option of selecting "New member". I'm trying to figure out how to append a set of indexed input fields within that group in the event "New member" is selected.

So, if the database contains the names: John Doe, Jane Doe, and Bob Dole, and the user selects John Doe for the first group and "New member" for the second, the markup may look like this (I added in comments to help illustrate what I'm trying to do, since I don't feel like I'm doing a good job here... ):

<!-- 
Group of indexed input fields 
where John Doe is selected 
-->

<div id="egtm-0-pm-name-uid-uid-wrapper">   
    <label for="egtm-0-pm-name-uid-uid">Name: </label>
    <input autocomplete="OFF" name="gtm[0][pm_name][uid][uid]" 
        id="egtm-0-pm-name-uid-uid" size="60" value="John Doe" type="text" />
</div>
<input id="egtm-0-pm-name-uid-uid-autocomplete" value="/ur/ac/pm_name" 
    disabled="disabled" type="hidden" />

<div id="egtm-0-pi-status-value-wrapper">
    <label for="egtm-0-pi-status-value">
        <input name="gtm[0][pi_status][value]" id="egtm-0-pi-status-value" 
            value="1" type="checkbox">PI
    </label>
</div>

<div id="egtm-0-staff-member-value-wrapper">
    <label for="egtm-0-staff-member-value">
        <input name="gtm[0][staff_member][value]" id="egtm-0-staff-member-value" 
            value="1" type="checkbox"> PTM
    </label>
</div>
<!-- End Group -->


<!-- 
Group of indexed input fields 
where New Member is selected 
-->

<div id="egtm-1-pm-name-uid-uid-wrapper">   
    <label for="egtm-1-pm-name-uid-uid">Name: </label>
    <input autocomplete="OFF" name="gtm[1][pm_name][uid][uid]" 
        id="egtm-1-pm-name-uid-uid" size="60" value="New member" type="text" />
</div>
<input id="egtm-1-pm-name-uid-uid-autocomplete" value="/ur/ac/pm_name" 
    disabled="disabled" type="hidden" />


    <!-- 
    THIS IS WHAT I'M TRYING TO ADD SINCE "New Member" IS SELECTED 
    AND IT'S PART OF THE GROUP WHERE THE INDEX FOR THE INPUT FIELDS = 1 
    -->

    <div id="egtm-1-pm-firstname-wrapper">  
        <label for="egtm-1-pm-firstname">First Name: </label>
        <input name="gtm[1][pm_firstname]" id="egtm-1-pm-firstname" 
            size="60" value="" type="text" />
    </div>

    <div id="egtm-1-pm-lastname-wrapper">   
        <label for="egtm-1-pm-lastname">Last Name: </label>
        <input name="gtm[1][pm_lastname]" id="egtm-1-pm-lastname" 
            size="60" value="" type="text" />
    </div>

    <div id="egtm-1-pm-email-wrapper">  
        <label for="egtm-1-pm-email">Email: </label>
        <input name="gtm[1][pm_email]" id="egtm-1-pm-email" 
            size="60" value="" type="text" />
    </div>
    <!-- END OF WHAT I'M TRYING TO ADD -->


<div id="egtm-1-pi-status-value-wrapper">
    <label for="egtm-1-pi-status-value">
        <input name="gtm[1][pi_status][value]" id="egtm-1-pi-status-value" 
            value="1" type="checkbox" />PI
    </label>
</div>

<div id="egtm-1-staff-member-value-wrapper">
    <label for="egtm-1-staff-member-value">
        <input name="gtm[1][staff_member][value]" id="egtm-1-staff-member-value" 
        value="1" type="checkbox" /> PTM
    </label>
</div>
<!-- End Group -->