how to apply javascript function to multiple textboxes with jquery

Question

I have a form where a user needs to input time entries for a date range. I need to validate what they're inputting so I was hoping I could create one function to simply validate a value to make sure it's numeric. Then tie that function to each textbox that has a css class of hourmin. I think I'm headed in the right direction below but I'm not sure how to finish it.

$(".hourmin").change(function () {
    //apply this validation call to the textbox which has .hourmin class
});

well, are you looking for `$(this).method()` ? – jAndy Oct 11 '10 at 13:15 — jAndy, Oct 11 '10 at 13:15
This looks correct. Where are you having a problem? – Stephen Oct 11 '10 at 13:15 — Stephen, Oct 11 '10 at 13:15
What issue are you exactly facing ? – Alpesh Oct 11 '10 at 13:17 — Alpesh, Oct 11 '10 at 13:17

score 0 · Answer 1 · answered Oct 11 '10 at 13:17

0

You can use $(this) to get the current textbox as a jQuery object and val() method for getting its value.

answered Oct 11 '10 at 13:17

Giorgi

30,270
13
89
125

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

See Validate decimal numbers in JavaScript - IsNumeric() For a long discussion on how to determine if a value is numeric. To get the value:

$(this).val();

edited May 23 '17 at 12:26

Community

1
1

answered Oct 11 '10 at 13:18

Plaudit Design

1,156
8
16

score 0 · Accepted Answer · edited May 23 '17 at 09:58

0

Define a css class invalid to highlight the invalid field, then use something akin to this:

$(".hourmin").change(function () {
    $(this).toggleClass('invalid', validate($(this).val()));
});

where validate() does your validation and returns a boolean. Have a look at Validate decimal numbers in JavaScript - IsNumeric() for a possible implementation of this.

edited May 23 '17 at 09:58

Community

1
1

answered Oct 11 '10 at 13:21

tKe

560
2
9

score 0 · Answer 4 · answered Oct 11 '10 at 13:22

Html:


Date:<input type="text" id="day" size="10" class="date" /> <input type="text" id="month" size="10" class="date" /> <input type="text" id="year" size="10" class="date"/>

jQuery:


$('.date').change(function(){
    var id=$(this).attr("id");
    var val = $(this).val();
    switch(id)
    {
        case "day":
            //validate day
            break;
        case "month":
            //validate month
            break;
        case "year":
            //validate year
            break;
    }
});

hope this helps

score 0 · Answer 5 · answered Oct 11 '10 at 13:30

Thanks, it was the $(this) that I was missing. Here's the final code in case it helps anyone else.

 $(document).ready(function () {
        $(".hourmin").change(function () {
            numbers = $(this).val();
            $(this).val(numbers.replace(/[^\d]+/g, ''));
        });
    });

how to apply javascript function to multiple textboxes with jquery

5 Answers5