Add event to input field using class name.

Hello,

I have an input field which i can add an blur event using :

$( "#H_ogo_OperationTyp1" ).on( "blur", function() {
  alert("hejosdfjlskjflsj") ;
});

Open in new window


But if want to add it to 6 fields, and these fields have a class called "opTYP".

what would the syntax be to add it to all fields of class "opTYPE"?

Thanks!
soozhAsked:
Who is Participating?
 
Chris StanyonCommented:
You just need to add the blur event to the class selector:

$(".opTYPE").on( "blur", function() {
    console.log( $(this).val() );
});

Open in new window

0
 
Dorababu MSenior Software EngineerCommented:
Can you show me your html design and what is your expected output on blur event.
A sample fiddle http://jsfiddle.net/BZRLG/5/
0
 
soozhAuthor Commented:
Thanks for the input.

The blur event will convert the chartacters to upper case.

I thought the general syntax would be

$(".opTYPE").each(function() { etc...

and that would add the blur event to each field with the class "opTYPE"
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Dorababu MSenior Software EngineerCommented:
If your form is having all input type as text then you can try this way
$(document).on('blur', "input[type=text]", function () {
    $(this).val(function (_, val) {
        return val.toUpperCase();
    });
});

Open in new window


Fiddle on the same http://jsfiddle.net/BZRLG/193/
0
 
soozhAuthor Commented:
unfortunately on some of the inputs are like this.  those with the class opTYPE.
0
 
Dorababu MSenior Software EngineerCommented:
Try this and let me know
$(document).ready(function () {
    $('.form-control').bind('blur', function () {
        $(this).val(function (_, val) {
        return val.toUpperCase();
    });
})
});

Open in new window

0
 
soozhAuthor Commented:
i cant see how that will work.

I have many input fields on my form (30+) and only on six of them i want to add the onblur event to convert the contents to uppercase.

So i have given these six a class called opTYPE because i though i could write some jquery that added the neccessary code to just those six fields.

Not possible?
0
 
Dorababu MSenior Software EngineerCommented:
If you can post your html I can look in to
0
 
Dorababu MSenior Software EngineerCommented:
How it is different from mine you just need to change the class .form-control to .opTYPE
0
 
soozhAuthor Commented:
well with my limited knowledge of jQuery i did not understand to change .form-control to .opTYPE
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.