Question

I have 2 textboxes on a page and they both have the class “OrderEntry”.

I want it so if there is any text in either of of these textboxes, it will show the div with ID “OrderPanel”. If the textboxes are cleared, backspaced or empty, it will hide the div “OrderPanel”.

So, the page loads, “OrderPanel” is hidden and both “OrderEntry” textboxes are empty. A user types a single character into either one of the textboxes and the “OrderPanel” is shown. If BOTH of the “OrderEntry” textboxes are empty, then the div is hidden.

I tried subscribing to the $(“.OrderEntry”).keydown() event but it seemed to apply both independently. Which means it would still show hide if one was empty and not based on both?

Any clues on how to do this in jQuery?

Answer 1

I’d use keypress I think, but that’s just my preference.

In the keywhatever function, check both textboxes.

$( '.OrderEntry' ).keydown(function(){
    var content = false;
    $( 'OrderEntry' ).each(function(){
        if( $( this ).val() != '' )
            content = true;
    });
    if( content )
        $( 'orderPanel' ).show();
    else
        $( 'orderPanel' ).hide();
});

Or something similar