StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBinding events in jquery (double event on click...)
text
Body
copied!<p>I'm creating a tax calculator and have some problems with binding events. There are five fields:</p> <ol> <li>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.</li> <li>Slider. When you move a slider, the number in the field changes.</li> <li>Select box with a few numeric values.</li> <li>and 5. Simple text boxes where you have to type numbers</li> </ol> <p>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:</p> <pre><code>$("[id=select_box_1]").bind("change", recalc); </code></pre> <p>and slider change with similar code.</p> <p>However, there are problems with triggering "recalc" in two cases.</p> <p>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.</p> <p>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.</p> <p>Here is part of my code:</p> <pre><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> </code></pre> <p>The calculation goes in this order:</p> <ol> <li>A city that user has typed in the city field gets a numeric value assigned and that value is pulled in the "citytaxrate" field</li> <li>All of the values (except "citytaxrate") are summed up using "calculatesum" function that is triggered with clicking on "Go!" button</li> <li>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.</li> </ol> <p>The main problem is how to make both of the functions get triggered on the same click. Even in HTML I can use</p> <pre><code>onsubmit="calculatesum(), recalc(); return false" </code></pre> <p>However, first click (submit) triggers only "calculatesum" function and another click will trigger "recalc" function.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload