如何使用jQuery在两个文本框中包含内容的基础上隐藏或显示div？

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

Answer 2

You're on the right track. Basically on the key event of choice (keydown, keypress, etc.) rather than showing .OrderPanel immediately, do a check on the contents of the .OrderEntry entities. If they both have values, show the panel, if not, don't.

EDIT:

To add to hookedonwinter's thought - I think the OP wants the panel to only show if all entry fields are completed, so I'd invert the boolean flag in your example to:

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

That way, if any of the .OrderEntry fields is empty, .OrderPanel isn't shown.`

Answer 3

I would do something like this:

$('.OrderEntry').change(function() {
  var bothEmpty = true;
  $('.OrderEntry').each(function() {
    if($(this).text().length > 0) {
      bothEmpty = false;
    }
  });
  if(bothEmpty) {
    $('#OrderPanel').show('slow');
  } else {
    $('#OrderPanel').hide('slow');
  }
});