Search code examples
javascriptjqueryjspstruts

Update form fields with dynamic field names

I need help making it so that when a user edits the values typed in one box, it updates the values in another box. For example, when the user updates the fields in red, I would like the fields in orange to automatically update to reflect the values of the fields in red. I have included a screenshot to demonstrate as well as the code I am using. I thought about using just some javascript ontab but I didn't see any examples with dynamic field names like mine. In the code the fields 

'<%="lnEntryItem[" + longNameIndex + "].start_month"%>' , '<%="lnEntryItem[" + longNameIndex + "].start_day"%>' and '<%="lnEntryItem[" + longNameIndex + "].start_year"%>'` should update `'<%="lnEntryItem[" + longNameIndex + "].end_month"%>' , '<%="lnEntryItem[" + longNameIndex + "].end_day"%>' and '<%="lnEntryItem[" + longNameIndex + "].end_year"%>'` respectively.

input boxes

Code:

<%!
    private String current(int index) {
        String output = "";
        if (index == 0) {
            output = "<td>&nbsp;<font color=\"red\"><em>Current</em></font></td>";
        } else if (index == 1) {
            output = "<td>&nbsp;<font color=\"blue\"><em>Next Most Recent</em></font></td>";
        } else if (index == 2) {
            output = "<td>&nbsp;<font color=\"blue\"><em>2nd Most Recent</em></font></td>";
        } else if (index == 3) {
            output = "<td>&nbsp;<font color=\"blue\"><em>3rd Most Recent</em></font></td>";
        } else if (index >= 4) {
            output = "<td>&nbsp;<font color=\"blue\"><em>" + index + "th Most Recent</em></font></td>";
        }
        return output;
    }
%>
<html:form action="EditUnit.do" method="POST" enctype="multipart/form-data" focus="xid">
    <p><bean:define id="oldForm" property="writeUnitForm" name="ses" scope="session"/>
    <bean:define id="newForm" name="EditUnitForm" scope="session"/>
    <bean:define id="unit_id" property="unit_id" name="oldForm" scope="page"/>
    <bean:define id="unit" property='<%= (String) pageContext.getAttribute("unit_id")%>' name="listUnitInfo" scope="page"/>
    Unit ID: <bean:write property="unit_num" name="unit" scope="page"/></p>
<hr/>
Unit names: Enter Names and start date (default: today)
<table border="0" cellspacing="0">
    <tr style="border-bottom: #000000 1px solid;">
        <th>Start (mm/dd/yyyy)&nbsp;</th>
        <th>&nbsp;-&nbsp;</th>
        <th>&nbsp;End (mm/dd/yyyy)&nbsp;</th>
        <th>Long Name</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
    </tr>
    <%! int longNameIndex;%>
    <%! int longNameCount = 0;%>
    <logic:iterate id="lnEntryItem" indexId="longNameIndex" property="long_names" name="newForm" scope="page">
        <tr>
            <td style="text-align: right;"><html:text property='<%="lnEntryItem[" + longNameIndex + "].start_month"%>' size="2" maxlength="2"/>/<html:text property='<%="lnEntryItem[" + longNameIndex + "].start_day"%>' size="2" maxlength="2"/>/<html:text property='<%="lnEntryItem[" + longNameIndex + "].start_year"%>' size="4" maxlength="4"/>&nbsp;</td>
        <td>&nbsp;-&nbsp;</td>
        <% if (longNameIndex == 0) {%>
        <td style="text-align: right;"><html:text property='<%="lnEntryItem[" + longNameIndex + "].end_month"%>' size="2" maxlength="2"/>/<html:text property='<%="lnEntryItem[" + longNameIndex + "].end_day"%>' size="2" maxlength="2"/>/<html:text property='<%="lnEntryItem[" + longNameIndex + "].end_year"%>' size="4" maxlength="4"/>&nbsp;</td>
        <% } else {%>
        <td style="text-align: right;"><html:text readonly="true" property='<%="lnEntryItem[" + longNameIndex + "].end_month"%>' size="2" maxlength="2"/>/<html:text readonly="true" property='<%="lnEntryItem[" + longNameIndex + "].end_day"%>' size="2" maxlength="2"/>/<html:text readonly="true" property='<%="lnEntryItem[" + longNameIndex + "].end_year"%>' size="4" maxlength="4"/>&nbsp;</td>
        <% }%>
        <td>&nbsp;<html:text property='<%="lnEntryItem[" + longNameIndex + "].data"%>' size="70" maxlength="70"/>&nbsp;</td>
        <%=current(longNameIndex)%>
        <% if (longNameIndex == 0) {%>
        <td><font color="red"><strong>*Required</strong></font></td>
            <% } else {%>
        <td></td>
        <% }%>
        </tr>
        <%longNameCount++;%>
    </logic:iterate>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="submit" name="btn_addfield_longName" value="Add a Long Name"/>
            <% if (longNameCount > 1) {%>
            &nbsp;<input type="submit" name="btn_rmvfield_longName" value="Remove Last Row"/>
            <% }%>
            <%longNameCount = 0;%>
        </td>
        <td></td>
    </tr>
</table>

JQuery script I was attempting to use:

    <script>
    $(function(){
$('START DATE ID').keyup(function() { //how to know what that is?
    var item=$(this);
    if(item.val() != "") {
        var tot = item.val();
        $('END DATE ID').val(tot); //how to know what that is?
    }
});
});
    </script>

But I am not sure how I can modify that to incorporate the dynamic field names.

Here is the HTML of the jsp:

<table border="0" cellspacing="0">
    <tbody>
        <tr style="border-bottom: #000000 1px solid;">
            <th>Start (mm/dd/yyyy)&nbsp;</th>
            <th>&nbsp;-&nbsp;</th>
            <th>&nbsp;End (mm/dd/yyyy)&nbsp;</th>
            <th>Long Name</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <input type="hidden" name="lnEntryItem[0].id" value="2750"/>
            <td style="text-align: right;">
                <input type="text" name="lnEntryItem[0].start_month" maxlength="2" size="2" value="05"/>
                /<input type="text" name="lnEntryItem[0].start_day" maxlength="2" size="2" value="30"/>
                /<input type="text" name="lnEntryItem[0].start_year" maxlength="4" size="4" value="2013"/>
            </td>
            <td>&nbsp;-&nbsp;</td>
            <td style="text-align: right;">
                <input type="text" name="lnEntryItem[0].end_month" maxlength="2" size="2" value=""/>
                /<input type="text" name="lnEntryItem[0].end_day" maxlength="2" size="2" value=""/>/
                <input type="text" name="lnEntryItem[0].end_year" maxlength="4" size="4" value=""/>
            </td>
            <td>
                <input type="text" name="lnEntryItem[0].data" maxlength="70" size="70" value="Jen's test unit"/></td>
            <td>&nbsp;<font color="red"><em>Current</em></font></td>
            <td><font color="red"><strong>*Required</strong></font></td>
        </tr>
        <tr>
            <input type="hidden" name="lnEntryItem[1].id" value="2757"/>
            <td style="text-align: right;"><input type="text" name="lnEntryItem[1].start_month" maxlength="2" size="2" value="05"/>
                /<input type="text" name="lnEntryItem[1].start_day" maxlength="2" size="2" value="01"/>
                /<input type="text" name="lnEntryItem[1].start_year" maxlength="4" size="4" value="2013"/>
            </td>
            <td>&nbsp;-&nbsp;</td>
            <td style="text-align: right;">
                <input type="text" name="lnEntryItem[1].end_month" maxlength="2" size="2" value="05" readonly="readonly"/>
                /<input type="text" name="lnEntryItem[1].end_day" maxlength="2" size="2" value="30" readonly="readonly"/>
                /<input type="text" name="lnEntryItem[1].end_year" maxlength="4" size="4" value="2013" readonly="readonly"/>
            </td>
            <td>&
                <input type="text" name="lnEntryItem[1].data" maxlength="70" size="70" value="Jen's testing unit"/></td>
            <td><font color="blue"><em>Next Most Recent</em></font></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <input type="submit" name="btn_addfield_longName" value="Add a Long Name"/>
                <input type="submit" name="btn_rmvfield_longName" value="Remove Last Row"/>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>
Solution

  • You've got your event handlers wrong. Use keyup or change, not onkeyup or onchange (which would only be used if you were calling them inline).

    Then use the following code:

    var startDate = $('input[name*="start_"]');

startDate.on('keyup', function () {
    var index = this.name.indexOf('start_'),
        name = this.name.substr(index).replace('start_', 'end_'),
        prevEntry = $(this).parents('tr').next(),
        endDate = prevEntry.find('input[name*="' + name + '"]');
    endDate.val(this.value);
});

    Demo