在同一迭代中从各种下拉列表中选择特定值时显示动态文本框

Question

I want to display the text box when a particular value from the list is selected .I am able to do so but the thing is i have been iterating a loop to print that drop down of list.The Drop down appear twice.How can i make the text box appear on the specific value selection form both the drop down selection.

Here is my JSP code

<s:iterator value="schemePayoutDTO.schemePayoutListFSE" var="fsePay" status="fsePayStatus">
  <s:hidden name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramID" />
  <tr>
    <td>
      <s:textfield name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramValue1" label="%{#fsePay.paramName}"></s:textfield>
      <s:div id="div1" cssStyle="margin-left:15cm; position: relative; bottom:-45px;">
        <s:select style="width: 150px;" id="select" list="schemPayoutTypeList" listKey="payoutType" listValue="payoutTypeVal" name="payoutTypeVal" onchange="showPayoutValue(this.selectedIndex)" />
      </s:div>
    </td>
  </tr>
</s:iterator>

I am using the function showPayoutValue on select tag of struts to show the text box but that text box is appearing once. I want to show the text box for every correct value selection from the drop down.

Javascript code

function showPayoutValue(name){
  if(name=='1' )
       document.getElementById('div1').innerHTML='Capping: <input type="text" name="other" />';
  else 
       document.getElementById('div1').innerHTML='';
}

Here is the screen shot of what i am doing.Also beside the Usage text box if i am selcting the value Percentage with capping then CApping text box must appear.

Can someone please help me put for this.

Please suggest me any other way out if any.

I will be very thankful

Answer 1

Few things to note

---

• Your iterator will create duplicate id s which is against the rules of HTML . The id should be unique per page .
• When you say document.getElementById it will always get the first matching element and hence the first div1 will have the input always.
• Replace your id with class and try to match the element which is always closest to the select element.
• You are also placing select element inside div1 and changing its innerHTML . This will actually, as of my knowledge, will remove the select element too. So place it outside the div1 element, probably in a separate div

Changes to be made

---

JSP Changes

<s:iterator value="schemePayoutDTO.schemePayoutListFSE" var="fsePay" status="fsePayStatus">
  <s:hidden name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramID" />
  <tr>
    <td>
      <s:textfield name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramValue1" label="%{#fsePay.paramName}"></s:textfield>
      <s:select style="width: 150px;" class="select" list="schemPayoutTypeList" listKey="payoutType" listValue="payoutTypeVal" name="payoutTypeVal" onchange="showPayoutValue(this)" /> 
      <!-- Pass element instead of value to identify which element has to targeted -->
      <!-- Keep this outside-->
      <s:div class="div1" cssStyle="margin-left:15cm; position: relative; bottom:-45px;">
      <!--Change id to class and keep this empty-->
      </s:div>
    </td>
  </tr>
</s:iterator>

JS Changes

function showPayoutValue(ctrl) {
  var name = ctrl.value;//get the selected value
  var targetDiv=ctrl.parentElement.getElementsByClassName('div1')[0];
  //get Target div relating to its parent
  if (name == '1')
    targetDiv.innerHTML = 'Capping: <input type="text" name="other" />';
  else
    targetDiv.innerHTML = '';
  //You can also use conditional operators instead of if else here as below
  //targetDiv.innerHTML=name==1?'Capping: <input type="text" name="other" />':'';
}

DEMO

---

Assuming html will be generated as what given in DEMO

 function showPayoutValue(ctrl) { var name = ctrl.value; var targetDiv=ctrl.parentElement.getElementsByClassName('div1')[0]; if (name == '1') targetDiv.innerHTML = 'Capping: <input type="text" name="other" />'; else targetDiv.innerHTML = ''; } 

 <div value="schemePayoutDTO.schemePayoutListFSE" var="fsePay" status="fsePayStatus"> <tr> <td> <input type="text" name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramValue1"/> <select style="width: 150px;" class="select" name="payoutTypeVal" onchange="showPayoutValue(this)"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> <!-- Pass element instead of value to identify which element has to targeted --> <!-- Keep this outside--> <div class="div1" cssStyle="margin-left:15cm; position: relative; bottom:-45px;"> <!--Change id to class and keep this empty--> </div> </td> </tr> </div> <div value="schemePayoutDTO.schemePayoutListFSE" var="fsePay" status="fsePayStatus"> <tr> <td> <input type="text" name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramValue1"/> <select style="width: 150px;" class="select" name="payoutTypeVal" onchange="showPayoutValue(this)"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> <!-- Pass element instead of value to identify which element has to targeted --> <!-- Keep this outside--> <div class="div1" cssStyle="margin-left:15cm; position: relative; bottom:-45px;"> <!--Change id to class and keep this empty--> </div> </td> </tr> </div> <div value="schemePayoutDTO.schemePayoutListFSE" var="fsePay" status="fsePayStatus"> <tr> <td> <input type="text" name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramValue1"/> <select style="width: 150px;" class="select" name="payoutTypeVal" onchange="showPayoutValue(this)"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> <!-- Pass element instead of value to identify which element has to targeted --> <!-- Keep this outside--> <div class="div1" cssStyle="margin-left:15cm; position: relative; bottom:-45px;"> <!--Change id to class and keep this empty--> </div> </td> </tr> </div>