How to implement "onKeyPress" in JSP?

Question

I have the following requirement :

In my webpage I have text box labeled as "Country". Now if I type something on the text box for Country, another text box labeled as "City" should be visible. If I don't type anything on the textbox for Country the "City" should not be visible.

I have the following JSP where I am taking the input for "Country" :

<td width="20%">
    <s:label key="partner.Country" cssClass="Labels"></s:label>
    <font color="#FF0000">*</font>
</td>
<td width="20%">
    <s:textfield id="id_PartnerNameRecv" name="partnerDetails.partnerNameRecv" cssClass="Rectangle-1-Copy-4">onchange="tnKeyPressForCity(this.value)"</s:textfield>
</td>

function tnKeyPressForCity(radioButtonObj){
    var keyPressed =radioButtonObj;
    if (keyPressed != ""){
        $('#id_CityRecv').show();
    }
}

I am not sure on how to implement the above feature. This is how I am trying to create my function.

Possible duplicate of [Detecting Key Press in jsp](http://stackoverflow.com/questions/31539730/detecting-key-press-in-jsp) — Bahadir Tasdemir, Nov 21 '16 at 07:09
Since you are using `$`, i hope you are using Jquery library before using Jquery. — Samir, Nov 21 '16 at 07:10

score 0 · Accepted Answer · answered Nov 21 '16 at 07:18

Try, using like this, Better to use .addClass() and .removeClass() instead of .show()/hide().

<td width="20%">
    <s:label key="partner.Country" cssClass="Labels"></s:label>
    <font color="#FF0000">*</font>
</td>
<td width="20%">
    <s:textfield id="id_PartnerNameRecv" name="partnerDetails.partnerNameRecv" cssClass="Rectangle-1-Copy-4"></s:textfield>
</td>

JS,

$("#id_PartnerNameRecv").on('keypress', function(){

    var keyPressed = $(this).val();
    if (keyPressed != ""){
        $('#id_CityRecv').addClass('show');
    }else{
        $('#id_CityRecv').removeClass('show');
    }

});

CSS,

.show{
    display: block;
}
#id_CityRecv{
    display: none;
}

How to implement "onKeyPress" in JSP?

1 Answers1