Обновить поля формы с именами динамических полей

Question

Мне нужна помощь, так что, когда пользователь редактирует значения, введенные в одном поле, он обновляет значения в другом поле. Например, когда пользователь обновляет поля в 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> 

Но я не знаю, как я могу изменить что для включения имен динамических полей.

Вот HTML в 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> 

Answer 1

У вас неправильные обработчики событий. Используйте keyup или change, а не onkeyup или 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); 
}); 

Demo

Answer 2

Если я правильно Вас понял, Вы можете попробовать использовать события JavaScript (ы) размытия на красном поле, чтобы обновить апельсин. Событие размытия запускается, когда красный блок в этом сценарии теряет фокус.

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

что-то в этом духе. Если вам требуется более мгновенное обновление, попробуйте посмотреть событие onKeyUp. Выполните аналогичные действия, но это будет срабатывать сразу после нажатия клавиши.