javascript - 動的フィールド名でフォーム フィールドを更新する

Question

ユーザーが 1 つのボックスに入力された値を編集すると、別のボックスの値が更新されるようにするための助けが必要です。たとえば、ユーザーが red のフィールドを更新すると、 redのフィールドの値を反映するようにオレンジ色のフィールドが自動的に更新されるようにします。デモ用のスクリーンショットと、使用しているコードを含めました。javascript ontab だけを使用することを考えましたが、私のような動的フィールド名の例は見当たりませんでした。コード内のフィールド

'<%="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.

コード：

<%!
    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>
    $(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>

しかし、動的フィールド名を組み込むためにそれを変更する方法がわかりません。

jsp の HTML は次のとおりです。

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