Changing jsp based on the option selected in the dropdown box

[nagusatya]

<table summary="Details">

<colgroup>
<col style="width: 22em" />
<col style="width: 22em" />
</colgroup>

<tbody>
<tr>
<th scope="row" align="left"><label for="paymenyType"
class="smallLabel">Paymeny Type</label></th>

<td><html:select property="paymenyType"
tabindex="1040" styleId="paymenyType">
<option value="">Please Select</option>
<option value="type1">Type1</option>
<option value="type2">Type2</option>
<option value="type3">Type3</option>
</html:select></td>
</tr>
...............................

...............................

</tbody>
</table>

when Type1 is selected the following code should appear between the above dotted lines:

<tr>
<th scope="row" align="left"><label for="payFrequency"
class="smallLabel">Pay Frequency</label></th>
<td><html:select property="payFrequency"
tabindex="1040" styleId="payFrequency">
<option value="">Please Select</option>
<option value="daily">Daily</option>
<option value="monthly">Monthly</option>
<option value="Yearly">Yearly</option>
</html:select></td>
</tr>

<tr>
<th scope="row" align="left"><label for="Percentage"
class="smallLabel">Percentage</label></th>
<td><html:text property="percentage" styleId="Percentage" size="5"
maxlength="5" /></td>
</tr>

<tr>
<th scope="row" align="left"><label for="PaymentDate"
class="smallLabel">Date of First Payment(<abbr
title="day month year (4 digit)">dd/mm/yyyy</abbr>)</label></th>
<td><html:text property="paymentDate" styleId="PaymentDate"
size="10" maxlength="10" /></td>
</tr>

when Type2 is selected the following code should appear between the above dotted lines:

<tr>
<th scope="row" align="left"><label for="payFrequency"
class="smallLabel">Pay Frequency</label></th>
<td><html:select property="payFrequency"
tabindex="1040" styleId="payFrequency">
<option value="">Please Select</option>
<option value="daily">Daily</option>
<option value="monthly">Monthly</option>
<option value="Yearly">Yearly</option>
</html:select></td>
</tr>

<tr>
<th scope="row" align="left"><label for="amount"
class="smallLabel">Amount</label></th>
<td><html:text property="amount" styleId="amount" size="5"
maxlength="5" /></td>
</tr>

<tr>
<th scope="row" align="left"><label for="PaymentDate"
class="smallLabel">Date of First Payment(<abbr
title="day month year (4 digit)">dd/mm/yyyy</abbr>)</label></th>
<td><html:text property="paymentDate" styleId="PaymentDate"
size="10" maxlength="10" /></td>
</tr>


when Type3 is selected the following code should appear between the above dotted lines:

<tr>
<th scope="row" align="left"><label for="payFrequency"
class="smallLabel">Pay Frequency</label></th>
<td><html:select property="payFrequency"
tabindex="1040" styleId="payFrequency">
<option value="">Please Select</option>
<option value="daily">Daily</option>
<option value="monthly">Monthly</option>
</html:select></td>
</tr>



can you please tell me how can i achieve this using javascript?
i need to put these table rows dynamically based on the selected value in the dropdown list which are Type1,Type2 and Type3.

any ideas?

i will be waiting for reply.

regards and thanks in advance

 

[BabyJeffy]

JSP (Java Server Pages) are processed server-side. Once they are all built up (from includes, beans etc) then the HTML is delievered to the web browser. Once the browser has recieved the HTML, it takes over the rendering of the HTML.

Whilst you can use Javascript to manipulate the DOM of a page, you cannot cause the page to be fully "re-rendered" as a JSP without requesting the page again from the server.

You are attempting to insert some JSTL tags or something using Javascript. These tags will never be parsed and will be ignored.

If you are able to, you could deliver the full HTML for those extra bits of code and wrap them in a container (DIV maybe) that you could use CSS to set display:none on. The onchange for the select drop-down would then show/hide the container based on the selection.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[nagusatya]

Hi Jeff,

is there any way i can achieve this?
i have to get that from server
the 2 drop down lists used in my code are not static ones as i mentioned i am getting them from one properties file dynamically.for simplicity i hard codfed here.

can you please suggest me the better way to achieve this with some sample code

cheers

 

[BabyJeffy]

You will need to think a bit about how you are going to architect this. What if the user isn't using javascript? Are you going to provide something for them?

If you are ok requiring javascript, then you could use AJAX techniques to do round-trip queries to a JSP page. As well as the suggestion of outputting the code initially from the server and wrapping the code in DIVs (with IDs) or something.

You could also use javascript to dynamically add to the table based on the dropdown selections.

There are loads of examples already on this forum where people show/hide code based on changing a drop-down select. There aren't so many examples of AJAX - but they are there (and google has a wealth of examples).

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[cLFlaVA]

you should be able to do this by incorporating CSS visibility/display styles along with some javascript that gets triggered on the onchange event of the drop-down object. here's a simple example for you to follow:

<script type="text/javascript"><!--
function doIt(sel) {
    var v = sel.options[sel.selectedIndex].value;
    var r2 = document.getElementById('tb2');
    var r3 = document.getElementById('tb3');

    if ( v == 2 ) {
        r2.style.display = '';
        r3.style.display = 'none';
    } else if ( v == 3 ) {
        r3.style.display = '';
        r2.style.display = 'none';
    }
}
//--></script>

<form name="f">
  <select name="s1" onchange="doIt(this);">
    <option value=""></option>
    <option value="2">show row 2</option>
    <option value="3">show row 3</option>
  </select>
</form>

<table>
  <tbody id="tb1">
    <tr>
      <td>Row 1</td>
    </tr>
  </tbody>
  <tbody id="tb2" style="display: none;">
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
  <tbody id="tb3" style="display: none;">
    <tr>
      <td>Row 3</td>
    </tr>
  </tbody>
</table>

this can also be achieved in a more dynamic fashion, but i am just providing an example. also, i have not tested this code, so don't scream if it doesn't work.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[nagusatya]

Hi Jeff,
thank you.
i want to use java script can you please give me one example the way i can achieve this in java script .
that would be great
Cheers

 

[cLFlaVA]

slight change:

    if ( v == [red]"[/red]2[red]"[/red] ) {
        r2.style.display = '';
        r3.style.display = 'none';
    } else if ( v == [red]"[/red]3[red]"[/red] ) {
        r3.style.display = '';
        r2.style.display = 'none';
    }

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[nagusatya]

hi cLFlaVa,

thanks for your code but i am now aware of css.

i could not understand r2.style.display = '';
r3.style.display = 'none';
can i acieve this in any other way?

how can i apply your sample code for my problem.

your suggestions are highly appreciated

regards and thanks in advance

 

[cLFlaVA]

this is not a teaching seminar. if you do not understand something, you'll need to do some research. you have posed your problem, and we have given you potential solutions / workarounds.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

additionally, if you were to copy/paste my example and try it on your own, you'd get an excellent idea of how it works, and should then be able to apply the concept to your specific problem.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[nagusatya]

Hi clFlaVa,

your code is great and helpful.i applied it in my case. but the problem is i am getting the dropdown list values from the request(set in controler)
here is it

<tr>
<th scope="row" align="left"><label for="payment"
class="smallLabel">Payment Required</label></th>
<td><html:select property="payment" tabindex="1040"
styleId="withDrawal">
<option value="">Please Select</option>
<logic:iterate id="paymentOption"
name="<%=OnlineConstants.getPaymentOptionListName()%>">
<option value="<bean:write name ="paymentOption"/>"><bean:write
name="paymentOption" /></option>
</logic:iterate>
</html:select></td>
</tr>

this code works fine as i am using it now.

but my problem is i used the value as below in your code

if ( v == "<bean:write name ="withDrawalTypeValue"/>" ) {
r2.style.display = '';
r3.style.display = 'none';
}

and it throws servlet exception and says Cannot find bean under name org.apache.struts.taglib.html.BEAN'

how can i give the value of the first element i am getting?
any ideas please suggest me


cheers

 

[cLFlaVA]

i default back to BabyJeffy - it seems you need something server-side, or i am not understanding this whole thing.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[nagusatya]

I am getting the drop down values from serverside properly
but could not give value to your code

how can i achieve this?

cheers