How to repeat JQuery function for multiple text boxes?

Question

I have a simple function I need to repeat 3 times for 3 seperate controls. It seems silly to replicate the same function 3 times however I don't myself know how to do this.

<script type="text/javascript">
$(document).ready(function () {
//        $("#LeaveHoursTextBox").blur(function () {
      $("input[type=text][id*=LeaveHoursTextBox]").blur(function () {
        alert("On Blur");
        var num1 = parseInt(document.getElementById("LeaveHoursTextBox").value);
        var num2 = parseInt(document.getElementById("LeaveHours2TextBox").value);
        var num3 = parseInt(document.getElementById("LeaveHours3TextBox").value);
        var TotalTime = num1 + num2 + num3;
        document.getElementById("HoursTextBox").value = TotalTime;
    })
});
</script>

The above code works when leaving the first text box. Instead of copying and pasting for the other 2 text boxes how would I add them into this same code element ?

I would change var num1 = parseInt(document.getElementById("LeaveHoursTextBox").value) to var num1 = parseInt($("#LeaveHoursTextBox").val()). Its shorter and I personally think that it is easier to read. — JoeFletch
– JoeFletch, Commented Oct 25, 2012 at 17:16

skybondsor · Accepted Answer · 2012-10-25 17:14:12Z

2

$("#LeaveHoursTextBox,#otherTextBox,#thirdTextBox")...

answered Oct 25, 2012 at 17:14

skybondsor

74710 silver badges21 bronze badges

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

4 Comments

dibblm Over a year ago

Please note that line is commented out in the original code as it doesn't work

skybondsor Over a year ago

Sorry about that! But the same principle applies: $("input[type=text][id*=LeaveHoursTextBox],input[type=text][id*=secondTextbox],input[type=text][id*=thirdTextBox]")

dibblm Over a year ago

This Worked.. $("input[type=text][id*=LeaveHoursTextBox],[id*=LeaveHours2TextBox],[id*=LeaveHours2TextBox]").blur(function () {

dibblm Over a year ago

did.. Had to wait 4 minutes the system said before it would allow me to.

Mr. Dizzy · Accepted Answer · 2012-10-25 17:21:13Z

0

Could you not give them a common class name? This seems to be the cleaner solution.

$('.textBoxes')

returns -> [textbox1, textbox2, textbox4]

answered Oct 25, 2012 at 17:21

Mr. Dizzy

433 bronze badges

3 Comments

skybondsor Over a year ago

This would, indeed, be cleaner! I was assuming you'd already ruled out that possibility.

dibblm Over a year ago

I probably could however there are 20 textboes on this form. Im new to javascript as well as jquery and honestly don't know how to. I haven't yet figured all the properties to javascript nor JQuery

Mr. Dizzy Over a year ago

If you have many text boxes than I absolutely would add common classes to the ones you want to select as a group. The problem with using ID's is that they must be unique and and if you are selecting by id the selector will become very hard to manage. jQuery was really designed to be able to select elements in groups and it is very a light-weight process for it to do so.

Collectives™ on Stack Overflow

How to repeat JQuery function for multiple text boxes?

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related