Hide button depending of if textbox has text or not with jQuery?

Question

Hi,

I have a a couple of datetime picker fields and if any of them is empty I want the Submit button to be invisible. I know how to do that but not how to make the button visible if all the datetime picker fields contains text.

I've seen exmaples using keyup but when I use the datetime picker I never put my cursor in the textbox and type something, the datetime picker populates the field.

The button has an name ending with diidIOSaveItem. I can't use ID or name with the datetime pickers.

if ($("input[title='Target Date']").val().length < 1)
{
$("input[name$='diidIOSaveItem']").hide();
}
else
{
$("input[name$='diidIOSaveItem']").show();
}

This hides the button if there's no set target date. How do I show the button if there's something in the field no mater how I put it there?

Thanks in advance.

UPDATE

I know have:

$("input[title='Start Date']").bind('keyup keydown change', function () {
  if ($(this).val() == '') {
    $("input[name$='diidIOSaveItem']").hide();
  } else {
    $("input[name$='diidIOSaveItem']").show();
  }
}).change();

$("input[title='Target Date']").bind('keyup keydown change', function () {
  if ($(this).val() == '') {
    $("input[name$='diidIOSaveItem']").hide();
  } else {
    $("input[name$='diidIOSaveItem']").show();
  }
}).change();

$("select[title='Strategic Objective']").bind('keyup keydown change', function () {
  if ($(this).val() == 0) {
    $("input[name$='diidIOSaveItem']").hide();
  } else {
    $("input[name$='diidIOSaveItem']").show();
  }
}).change();

$("select[title='Strategic Priority']").bind('keyup keydown change', function () {
  if ($(this).val() == 0) {
    $("input[name$='diidIOSaveItem']").hide();
  } else {
    $("input[name$='diidIOSaveItem']").show();
  }
}).change();

If I don't have anything selected in one of the dropdownlists the button is hidden. However, if I select something in the dropdown lists the button becomes visible even though the datetime picker fields are empty. Suggestions?

Answer 1

If you really want it to be instant (any entry makes it show and it goes away as soon as you clear the input out) I go with this:

$.fn.extend({
  vals: function () {
    var retVals = []; 

    this.each(function () {
      retVals.push($(this).val())
    }); 

    return retVals; 
  }
});

var myInputs = "input[title='Target Date'], input[title='Start Date'], select[title='Strategic Objective']";

$(myInputs).bind('keyup keydown change', function () {
  var entries = $(myInputs).vals();

  for (i in entries) {
    if (entries[i] == '') {
      $("input[name$='diidIOSaveItem']").hide();
      return;
    }
  }

  $("input[name$='diidIOSaveItem']").show();
}).change();

With the updated example you can use vals() to get an array of the values of all of your inputs. In order for it to work with the Select Element you'll need your first Option to look like this: <option value=''> </option>. I think that should be pretty close.

Answer 2

For changes to the field itself, you can always listen to events:

$("input[title='Target Date']").bind('change keyup',function(){
  $("input[name$='diidIOSaveItem']").toggle($(this).val()!='');
});

For values set into the field, trigger change() on the input field. E.g.

$("#setvalue").click(function(){  
  $("input[title='Target Date']").val("hello"); // Set a value
  $("input[title='Target Date']").change(); // Force the change event
});

Code in action.