Databases
StackOverflow2013
Postsdbo
POUpdate form fields with dynamic field names
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUpdate form fields with dynamic field names
    primarykey
    data
    text
    <p>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 <strong>red</strong>, I would like the fields in <strong>orange</strong> to automatically update to reflect the values of the fields in <strong>red</strong>. 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 </p> <pre><code>'&lt;%="lnEntryItem[" + longNameIndex + "].start_month"%&gt;' , '&lt;%="lnEntryItem[" + longNameIndex + "].start_day"%&gt;' and '&lt;%="lnEntryItem[" + longNameIndex + "].start_year"%&gt;'` should update `'&lt;%="lnEntryItem[" + longNameIndex + "].end_month"%&gt;' , '&lt;%="lnEntryItem[" + longNameIndex + "].end_day"%&gt;' and '&lt;%="lnEntryItem[" + longNameIndex + "].end_year"%&gt;'` respectively. </code></pre> <p><img src="https://i.stack.imgur.com/woZ7R.png" alt="input boxes"></p> <p>Code:</p> <pre><code>&lt;%! private String current(int index) { String output = ""; if (index == 0) { output = "&lt;td&gt;&amp;nbsp;&lt;font color=\"red\"&gt;&lt;em&gt;Current&lt;/em&gt;&lt;/font&gt;&lt;/td&gt;"; } else if (index == 1) { output = "&lt;td&gt;&amp;nbsp;&lt;font color=\"blue\"&gt;&lt;em&gt;Next Most Recent&lt;/em&gt;&lt;/font&gt;&lt;/td&gt;"; } else if (index == 2) { output = "&lt;td&gt;&amp;nbsp;&lt;font color=\"blue\"&gt;&lt;em&gt;2nd Most Recent&lt;/em&gt;&lt;/font&gt;&lt;/td&gt;"; } else if (index == 3) { output = "&lt;td&gt;&amp;nbsp;&lt;font color=\"blue\"&gt;&lt;em&gt;3rd Most Recent&lt;/em&gt;&lt;/font&gt;&lt;/td&gt;"; } else if (index &gt;= 4) { output = "&lt;td&gt;&amp;nbsp;&lt;font color=\"blue\"&gt;&lt;em&gt;" + index + "th Most Recent&lt;/em&gt;&lt;/font&gt;&lt;/td&gt;"; } return output; } %&gt; &lt;html:form action="EditUnit.do" method="POST" enctype="multipart/form-data" focus="xid"&gt; &lt;p&gt;&lt;bean:define id="oldForm" property="writeUnitForm" name="ses" scope="session"/&gt; &lt;bean:define id="newForm" name="EditUnitForm" scope="session"/&gt; &lt;bean:define id="unit_id" property="unit_id" name="oldForm" scope="page"/&gt; &lt;bean:define id="unit" property='&lt;%= (String) pageContext.getAttribute("unit_id")%&gt;' name="listUnitInfo" scope="page"/&gt; Unit ID: &lt;bean:write property="unit_num" name="unit" scope="page"/&gt;&lt;/p&gt; &lt;hr/&gt; Unit names: Enter Names and start date (default: today) &lt;table border="0" cellspacing="0"&gt; &lt;tr style="border-bottom: #000000 1px solid;"&gt; &lt;th&gt;Start (mm/dd/yyyy)&amp;nbsp;&lt;/th&gt; &lt;th&gt;&amp;nbsp;-&amp;nbsp;&lt;/th&gt; &lt;th&gt;&amp;nbsp;End (mm/dd/yyyy)&amp;nbsp;&lt;/th&gt; &lt;th&gt;Long Name&lt;/th&gt; &lt;th&gt;&amp;nbsp;&lt;/th&gt; &lt;th&gt;&amp;nbsp;&lt;/th&gt; &lt;/tr&gt; &lt;%! int longNameIndex;%&gt; &lt;%! int longNameCount = 0;%&gt; &lt;logic:iterate id="lnEntryItem" indexId="longNameIndex" property="long_names" name="newForm" scope="page"&gt; &lt;tr&gt; &lt;td style="text-align: right;"&gt;&lt;html:text property='&lt;%="lnEntryItem[" + longNameIndex + "].start_month"%&gt;' size="2" maxlength="2"/&gt;/&lt;html:text property='&lt;%="lnEntryItem[" + longNameIndex + "].start_day"%&gt;' size="2" maxlength="2"/&gt;/&lt;html:text property='&lt;%="lnEntryItem[" + longNameIndex + "].start_year"%&gt;' size="4" maxlength="4"/&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;-&amp;nbsp;&lt;/td&gt; &lt;% if (longNameIndex == 0) {%&gt; &lt;td style="text-align: right;"&gt;&lt;html:text property='&lt;%="lnEntryItem[" + longNameIndex + "].end_month"%&gt;' size="2" maxlength="2"/&gt;/&lt;html:text property='&lt;%="lnEntryItem[" + longNameIndex + "].end_day"%&gt;' size="2" maxlength="2"/&gt;/&lt;html:text property='&lt;%="lnEntryItem[" + longNameIndex + "].end_year"%&gt;' size="4" maxlength="4"/&gt;&amp;nbsp;&lt;/td&gt; &lt;% } else {%&gt; &lt;td style="text-align: right;"&gt;&lt;html:text readonly="true" property='&lt;%="lnEntryItem[" + longNameIndex + "].end_month"%&gt;' size="2" maxlength="2"/&gt;/&lt;html:text readonly="true" property='&lt;%="lnEntryItem[" + longNameIndex + "].end_day"%&gt;' size="2" maxlength="2"/&gt;/&lt;html:text readonly="true" property='&lt;%="lnEntryItem[" + longNameIndex + "].end_year"%&gt;' size="4" maxlength="4"/&gt;&amp;nbsp;&lt;/td&gt; &lt;% }%&gt; &lt;td&gt;&amp;nbsp;&lt;html:text property='&lt;%="lnEntryItem[" + longNameIndex + "].data"%&gt;' size="70" maxlength="70"/&gt;&amp;nbsp;&lt;/td&gt; &lt;%=current(longNameIndex)%&gt; &lt;% if (longNameIndex == 0) {%&gt; &lt;td&gt;&lt;font color="red"&gt;&lt;strong&gt;*Required&lt;/strong&gt;&lt;/font&gt;&lt;/td&gt; &lt;% } else {%&gt; &lt;td&gt;&lt;/td&gt; &lt;% }%&gt; &lt;/tr&gt; &lt;%longNameCount++;%&gt; &lt;/logic:iterate&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="submit" name="btn_addfield_longName" value="Add a Long Name"/&gt; &lt;% if (longNameCount &gt; 1) {%&gt; &amp;nbsp;&lt;input type="submit" name="btn_rmvfield_longName" value="Remove Last Row"/&gt; &lt;% }%&gt; &lt;%longNameCount = 0;%&gt; &lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>JQuery script I was attempting to use:</p> <pre><code> &lt;script&gt; $(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? } }); }); &lt;/script&gt; </code></pre> <p>But I am not sure how I can modify that to incorporate the dynamic field names.</p> <p>Here is the HTML of the jsp:</p> <pre><code>&lt;table border="0" cellspacing="0"&gt; &lt;tbody&gt; &lt;tr style="border-bottom: #000000 1px solid;"&gt; &lt;th&gt;Start (mm/dd/yyyy)&amp;nbsp;&lt;/th&gt; &lt;th&gt;&amp;nbsp;-&amp;nbsp;&lt;/th&gt; &lt;th&gt;&amp;nbsp;End (mm/dd/yyyy)&amp;nbsp;&lt;/th&gt; &lt;th&gt;Long Name&lt;/th&gt; &lt;th&gt;&amp;nbsp;&lt;/th&gt; &lt;th&gt;&amp;nbsp;&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;input type="hidden" name="lnEntryItem[0].id" value="2750"/&gt; &lt;td style="text-align: right;"&gt; &lt;input type="text" name="lnEntryItem[0].start_month" maxlength="2" size="2" value="05"/&gt; /&lt;input type="text" name="lnEntryItem[0].start_day" maxlength="2" size="2" value="30"/&gt; /&lt;input type="text" name="lnEntryItem[0].start_year" maxlength="4" size="4" value="2013"/&gt; &lt;/td&gt; &lt;td&gt;&amp;nbsp;-&amp;nbsp;&lt;/td&gt; &lt;td style="text-align: right;"&gt; &lt;input type="text" name="lnEntryItem[0].end_month" maxlength="2" size="2" value=""/&gt; /&lt;input type="text" name="lnEntryItem[0].end_day" maxlength="2" size="2" value=""/&gt;/ &lt;input type="text" name="lnEntryItem[0].end_year" maxlength="4" size="4" value=""/&gt; &lt;/td&gt; &lt;td&gt; &lt;input type="text" name="lnEntryItem[0].data" maxlength="70" size="70" value="Jen's test unit"/&gt;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;font color="red"&gt;&lt;em&gt;Current&lt;/em&gt;&lt;/font&gt;&lt;/td&gt; &lt;td&gt;&lt;font color="red"&gt;&lt;strong&gt;*Required&lt;/strong&gt;&lt;/font&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;input type="hidden" name="lnEntryItem[1].id" value="2757"/&gt; &lt;td style="text-align: right;"&gt;&lt;input type="text" name="lnEntryItem[1].start_month" maxlength="2" size="2" value="05"/&gt; /&lt;input type="text" name="lnEntryItem[1].start_day" maxlength="2" size="2" value="01"/&gt; /&lt;input type="text" name="lnEntryItem[1].start_year" maxlength="4" size="4" value="2013"/&gt; &lt;/td&gt; &lt;td&gt;&amp;nbsp;-&amp;nbsp;&lt;/td&gt; &lt;td style="text-align: right;"&gt; &lt;input type="text" name="lnEntryItem[1].end_month" maxlength="2" size="2" value="05" readonly="readonly"/&gt; /&lt;input type="text" name="lnEntryItem[1].end_day" maxlength="2" size="2" value="30" readonly="readonly"/&gt; /&lt;input type="text" name="lnEntryItem[1].end_year" maxlength="4" size="4" value="2013" readonly="readonly"/&gt; &lt;/td&gt; &lt;td&gt;&amp; &lt;input type="text" name="lnEntryItem[1].data" maxlength="70" size="70" value="Jen's testing unit"/&gt;&lt;/td&gt; &lt;td&gt;&lt;font color="blue"&gt;&lt;em&gt;Next Most Recent&lt;/em&gt;&lt;/font&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt; &lt;input type="submit" name="btn_addfield_longName" value="Add a Long Name"/&gt; &lt;input type="submit" name="btn_rmvfield_longName" value="Remove Last Row"/&gt; &lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRoman C
    1. USEvilsithgirl
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POUpdate form fields with dynamic field names
      1. This table or related slice is empty.
      1. VTDownMod
    1. COWhere's your JavaScript?
      singulars
      1. POUpdate form fields with dynamic field names
      1. USDerek S. Henderson
    2. COI have edited the original post with the javascript I was attempting to use. I got it to work for simple field names but I have no idea how to make it work for dynamic field names.
      singulars
      1. POUpdate form fields with dynamic field names
      1. USEvilsithgirl
    3. COIdeally you'd be using something semantic, and finding the "next" field of a given class to update and eliminate the need to target specific IDs. But since you have access to the ID of the element that was changed, you can either parse it out, or use a `data-` attribute to set additional info, or so on. I'd **strongly** recommend using a JS library for this, like jQuery or its equivalent: doing this by hand will be a trail of tears.
      singulars
      1. POUpdate form fields with dynamic field names
      1. USDave Newton
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload