-1

我需要帮助，以便当用户编辑在一个框中键入的值时，它会更新另一个框中的值。例如，当用户更新红色字段时，我希望橙色字段自动更新以反映红色字段的值。我已经包含了一个屏幕截图来演示以及我正在使用的代码。我考虑过只使用一些 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>
4

2 回答 2

1

您的事件处理程序错误。使用keyupor change， not onkeyupor onchange（仅当您内联调用它们时才会使用）。

然后使用以下代码：

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);
});

演示

于 2013-06-05T15:23:57.537 回答
-1

如果我理解正确，您可以尝试在红色框上使用 javascript blur 事件来更新橙色。当这个场景中的红框失去焦点时，会触发 blur 事件。

document.getElementByID("redboxname1").onblur=function() {
    document.getElementByID("orangebox1").value = document.getElementByID("redbox1").value;
}

类似的东西。如果您需要更即时的更新，请尝试查看 onKeyUp 事件。执行类似的操作，但这会在按键被按下后直接触发。

于 2013-06-05T14:33:19.980 回答