I've seen plenty examples of people disabling buttons if textboxes are empty but I haven't found any which will disable a button for only certain textboxes. I'm new to Jquery and I know it is pseudo coded but you can get the idea. Which Jquery function do I have to call so that it is constantly checking? And how can I use an or statement in the if clause to determine if any textbox field is empty?

if( $('#txtEvent').val.length === 0 || $("#txtID").val.length === 0)
 {
  $('#btnSave').attr("disabled", "disabled");
 }
else 
 {
  $('#btnSave').attr("enabled", "enabled");
 }

Form Controls

 <asp:TextBox ID="txtEvent" runat="server"></asp:TextBox>
< asp:TextBox ID="txtID" runat="server"></asp:TextBox>
<asp:Button ID="btnSave" runat="server"" Text="Save and Next" />

I've seen plenty examples of people disabling buttons if textboxes are empty but I haven't found any which will disable a button for only certain textboxes. I'm new to Jquery and I know it is pseudo coded but you can get the idea. Which Jquery function do I have to call so that it is constantly checking? And how can I use an or statement in the if clause to determine if any textbox field is empty?

if( $('#txtEvent').val.length === 0 || $("#txtID").val.length === 0)
 {
  $('#btnSave').attr("disabled", "disabled");
 }
else 
 {
  $('#btnSave').attr("enabled", "enabled");
 }

Form Controls

 <asp:TextBox ID="txtEvent" runat="server"></asp:TextBox>
< asp:TextBox ID="txtID" runat="server"></asp:TextBox>
<asp:Button ID="btnSave" runat="server"" Text="Save and Next" />

• javascript
• jquery

Share Improve this question Follow asked Aug 28, 2013 at 2:12 CSharperCSharper 5,60066 gold badges3131 silver badges5454 bronze badges 3

• 1 .val() instead of .val – Paul Chen Commented Aug 28, 2013 at 2:17
• If you just have these two inputs in your page, you can use $('input:text:empty').length > 0 – Bigxiang Commented Aug 28, 2013 at 2:20
• If there are more than two text boxes then you might want to add a class to all those textboxes and this class can be used as a JQUERY selector with @Aruns solution – Nilesh Commented Aug 28, 2013 at 2:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can do it two different ways:

if (!$("#txtEvent").val()) { //undefined will yield false
//call a method! .val() not .val
    $("#btnSave").attr("disabled", "disabled");
} else {
    $("#btnSave").attr("enabled", "enabled");
}

Or:

if ($("#txtEvent").length > 0) {
    $("#btnSave").attr("disabled", "disabled");
} else {
    $("#btnSave").attr("enabled", "enabled");
}

If you want these constantly running, wrap them in:

$("#txtEvent").on("change", function() { //code });
//using the onchange event will trigger the code whenever the txtbox changes.
//you can also use onblur if you want it to trigger AFTER the txtbox loses focus

Please note you'll have to convert these into proper asp code! This is simply a logistical answer.

Try

var $empties = $('#txtEvent, #txtID').filter(function(){
    return $.trim($(this).val()).length == 0
})

$('#btnSave').prop("disabled", $empties.length === 0);

Even though this is two years old question, I would like to show another way using bind. See the text 'keyup mouseup cut paste'

This will also work if you cut or paste text as well as keyboard input. Also this will work if we click the little cross in the text box to clear the text( using mouseup).

OP stated that disable a button for "only certain textboxes". Say we have following text boxes

<input type="text" name="tbox1" id="txtbox1" />
<input type="text" name="tbox2" id="txtbox2" />
<input type="text" name="tbox3" id="txtbox3" />
<input type="text" name="tbox4" id="txtbox4" />
<input type="submit" id="btnSubmit" name="button" value="Save and Next" disabled />

If we need to enable/disable the button based on values entered in to txtBox1 OR txtBox3 then we can use this

<script>
  $(document).ready(function() {

      $("#txtbox1, #txtbox3").bind('keyup mouseup cut paste', function () {
          var txt = $(this);
          setTimeout(function () {
              $('#btnSubmit').prop('disabled', $(txt).val() == ''); 
           }, 100);
      });
  });
</script>

If we need to enable/disable the button only when both txtBox1 AND txtBox3 are not empty then we can use this

<script>
  $(document).ready(function() {
      $("#txtbox1, #txtbox3").bind('keyup mouseup cut paste', function () {
         setTimeout(function () {
             ($('#txtbox1').val() && $('#txtbox3').val()) ? $('#btnSubmit').prop('disabled', false) : $('#btnSubmit').prop('disabled', true);
         }, 100);
      });
  });
</script>