Easy modification to jQuery code to make use of more than one textbox

Question

How to change the following code to make use of all my 4 textboxes with id extra1, extra2,persons and tables?

$(document).ready(function () {
  $('#extra1').blur(function () {
        if ($.trim(this.value) == "") {
          $('#btnUpdate').attr("disabled", true);
        }
      else {
            $('#btnUpdate').removeAttr("disabled");
      }
    });
});

genesis · Accepted Answer · 2011-09-03 22:48:57Z

2

  $('#extra1').blur(function () {

to

  $('#extra1, #extra2, #persons, #tables').blur(function () {

answered Sep 3, 2011 at 22:48

genesis

51.1k20 gold badges99 silver badges127 bronze badges

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

Comments

Christopher Armstrong · Accepted Answer · 2011-09-03 22:49:45Z

2

The code modification would be:

$(document).ready(function () {
  $('#extra1, #extra2, #persons, #tables').blur(function () {
        if ($.trim(this.value) == "") {
          $('#btnUpdate').attr("disabled", true);
        }
      else {
            $('#btnUpdate').removeAttr("disabled");
      }
    });
});

But, why not give all of them a class, and use that class as the selector? That way, you can easily add elements later without changing your Javascript.

answered Sep 3, 2011 at 22:49

Christopher Armstrong

7,9812 gold badges28 silver badges28 bronze badges

1 Comment

EnexoOnoma Over a year ago

That's true. Should I change it to .myclass?

ShankarSangoli · Accepted Answer · 2011-09-03 22:59:11Z

1

Use jQuery delegate which will bind only one event handler but will act only on the element which triggers the event. Try this

Wokring demo

$(document).ready(function () {
  $('formSelector').delegate('input[type=text]', 'blur', function () {
      if ($.trim(this.value) == "") {
          $('#btnUpdate').attr("disabled", true);
      }
      else {
            $('#btnUpdate').removeAttr("disabled");
      }
    });
});

edited Sep 3, 2011 at 22:59

answered Sep 3, 2011 at 22:53

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

4 Comments

ShankarSangoli Over a year ago

@Giorkouros - Take a look at this, its very simple. Replace the appropriate form selector in the code thats it.

EnexoOnoma Over a year ago

This is my fiddle jsfiddle.net/mPuj9/1 with your jQuery script. I still didn't manage to do it.

ShankarSangoli Over a year ago

It is very well working, tried your fiddle jsfiddle.net/mPuj9/1 too. Focus of any textbox, enter something and focus out of the textbox you will see the button gets enabled. What else do you need?

ShankarSangoli Over a year ago

Please verify this and make it as an answer if it helped you.

Collectives™ on Stack Overflow

Easy modification to jQuery code to make use of more than one textbox

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related