JQuery if certain textboxe's are empty, disable button

Question

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" />

If you just have these two inputs in your page, you can use $('input:text:empty').length > 0 — Bigxiang
– 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
– Nilesh, Commented Aug 28, 2013 at 2:52

Sterling Archer · Accepted Answer · 2013-08-28 02:19:54Z

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.

answered Aug 28, 2013 at 2:19

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CSharper Over a year ago

ok great thanks for the input, how can I check if multiple textboxes are null and in return multiple on change functions

Sterling Archer Over a year ago

with jquery you can select multiple by adding a comma between ids or class selectors. Based on those conditions, disable whatever. It might be a lot of if statments if you're disabling different buttons each time, if not it can be done in 1 with multiple jquery selectors.

Arun P Johny · Accepted Answer · 2013-08-28 02:26:23Z

0

Try

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

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

answered Aug 28, 2013 at 2:26

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Dush · Accepted Answer · 2015-09-25 08:57:43Z

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>

Collectives™ on Stack Overflow

JQuery if certain textboxe's are empty, disable button

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related