Question

I’m creating a tax calculator and have some problems with binding events. There are five fields:

1. A text field. User has to type his city and the script assigns a number to text value. For example, you type “New York”, and when you click “Go!”, the system assigns 0.1 to it.
2. Slider. When you move a slider, the number in the field changes.
3. Select box with a few numeric values.
4. and 5. Simple text boxes where you have to type numbers

All of these fields are in a form called “taxcalculator”. When you submit it, a function called “calculatesum” is triggered. The problem is that I have to use that sum for another calculation using jquery calculation plugin and the function called “recalc”. So, let’s assume someone filled in the mentioned fields, but wants to change some of the numbers or the text in the first field. I want to recalculate the other calculation on every change. I managed to bind select box change with:

$("[id=select_box_1]").bind("change", recalc);

and slider change with similar code.

However, there are problems with triggering “recalc” in two cases.

1: When you start a calculation with clicking “Go!” button, only one function is triggered. I want to accomplish that when you click “Go” button, both of the functions get triggered (calculatesum and recalc). However, only “calculatesum” is triggered, and I have to use “mousemove” or click again on that button to use another function.

2: User can change a city typed in the first field. In that case, numeric value changes, but the numeric field is hidden and I don’t know which property to use to trigger the “recalc” function. I thought that “change” is the logical choice, considering that value in the field changes, but it didn’t work.

Here is part of my code:

<form id="taxcalculator" style="height:150px;" action="#" onsubmit="calculatesum(); return false">

<input type="text" size="20" id="city" name="city" />

<div id="slider"></div>
</div>

<div id="income_1" style="width:300px; margin:0 0 15px 0;">
<select id="income_item_1" style="float:left; width:200px;">            
<option value="0" selected="selected">0</option>        
<option value="2.000">2.000</option>
<option value="4.000">4.000</option>
</select>
</div>

<input type="text" size="20" id="income2" name="income2" />
<input type="text" size="20" id="income3" name="income3" />

<input type="hidden" name="citytaxrate" id="citytaxrate">
<input type="submit" name="submit" value="Go!" id="go-calc" class="ui-button">
</div>
</form>

The calculation goes in this order:

1. A city that user has typed in the city field gets a numeric value assigned and that value is pulled in the “citytaxrate” field
2. All of the values (except “citytaxrate”) are summed up using “calculatesum” function that is triggered with clicking on “Go!” button
3. The total sum is used for “recalc” function which uses the total sum, citytaxrate value and two other values I manually inserted in the script.

The main problem is how to make both of the functions get triggered on the same click. Even in HTML I can use

onsubmit="calculatesum(), recalc(); return false"

However, first click (submit) triggers only “calculatesum” function and another click will trigger “recalc” function.

Answer 1

Well, if you want to bind two methods to the same event you can simply put them in one method and call it. I’ve never bound two methods to the same so can’t comment on why the dual binding is failing.

$("#select_box_1").change(theCommonMethod);

function theCommonMethod() {
   recalc();
   calculatesum();
}

If you put up some code examples on jsfiddle.net, we could help you with the second problem too.

EDIT

After your update, I posted a basic fiddle with most of the events you wanted bound. Have a look at this : http://jsfiddle.net/jomanlk/v5mRe/1/

Just use the jQuery selectors to get at the values you want and then do your calculations and update your text field.