How do I bind functions to all input elements using jQuery?

Question

let's say I have this set of HTML-markup and CSS

#CSS

.inputhelp_text { background: #000; color: #fff; }
.nodisplay { display: none; }

<input class="inputhelp" id="firstname" /><span class="inputhelp_text nodisplay" id="help_firstname">Write in your firstname</span>

<input class="inputhelp" id="lastname" /><span class="inputhelp_text nodisplay" id="help_lastname">Write in your lastname</span>

Using jQuery, I need to bind a function to all input fields (I guess using jQuery's EACH function) so that when I click the input field, it should switch the class of each span to only "inputhelp_text". I've gotten this to work in two separate functions for each field, but since I have alot of fields, I know there's a better way to solve it.

Any suggestions?

I'm not used to jQuery, so even with a manual things start out slow. "Thank" you. — Coreus
– Coreus, Commented Mar 23, 2010 at 9:35

cletus · Accepted Answer · 2010-03-23 09:03:15Z

2

You want to bind handlers to the blur() and focus() events:

$(".inputhelp").focus(function() {
  $("span.inputhelp_text:visible").addClass("nodisplay");
  $(this).next("span.inputhelp_text").removeClass("nodisplay");
}).blur(function() {
  $("span.inputhelp_text").addClass("nodisplay");
});

Normally I'd recommend using jQuery effects like hide() and show() but these only really work with block level elements. <span> are inline so this won't work.

edited Mar 23, 2010 at 9:03

answered Mar 23, 2010 at 8:58

cletus

627k169 gold badges922 silver badges945 bronze badges

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

1 Comment

cletus Over a year ago

@bakkelun details would undoubtedly be useful

kgiannakakis · Accepted Answer · 2010-03-23 08:53:56Z

1

You can use the each function:

$("input").each(function() {
  // this points to the input DOM element
  // $(this) is the jQuery wrapped element
});

For example you could have:

$(this).removeClass("inputhelp");
$(this).addClass("inputhelp_text");

inside the callback.

answered Mar 23, 2010 at 8:53

kgiannakakis

104k28 gold badges163 silver badges197 bronze badges

3 Comments

Coreus Over a year ago

Could this work as well?? To select all inputs with class "inputhelp" ? $('input[class=inputhelp]').bind('focus',function() { // do something }

kgiannakakis Over a year ago

Yes, but $("input.inputhelp") or $(".inputhelp") are more simple selectors that do the same thing.

Coreus Over a year ago

Please remember that shorter (more non-spesific) triggers makes the search for it inside the DOM slower. Much like xpath queries; specifying a longer more spesific path speeds up the query.

Zachary Friedman · Accepted Answer · 2013-02-21 00:14:38Z

0

What I do in this situation is the following. Let us say that you have a set of $("input")'s that you want to bind to in some way, for example you want to add a class of .invalid when they are empty:

$("input").each(function () {
      var $this = $(this);
      $this.focus(function (e) {
        $this.removeClass("invalid");
      });

      $this.blur(function (e) {
        if ($this.val() == "") {
          $this.addClass("invalid");
        }
      });
    });

By storing a reference to $(this) returned from $.fn.each, you can now bind to events on each of the elements individually.

answered Feb 21, 2013 at 0:14

Zachary Friedman

1092 bronze badges

Collectives™ on Stack Overflow

How do I bind functions to all input elements using jQuery?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related