CODEWITHSUNDEEP
javascriptjquery.net
CSharper
CSharper

Reputation: 5580

JQuery if certain textboxe's are empty, disable button

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

Upvotes: 1

Views: 9853

Answers (3)

Dush
Dush

Reputation: 1365

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).

enter image description here

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>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

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

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

Upvotes: 0

Sterling Archer
Sterling Archer

Reputation: 22395

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.

Upvotes: 3

Related Questions