Add values of textfields Jquery HTML

Question

I have a textfield and I need to add their values. The problem is that the values in these textfields are not typed in but got from another source. These text fields also happen to be read only. What I need is the appropriate event to fire when the values of these textfields change. Here is what i am currently using but its not good enough since I have to click and lose focus so that the textfields calculate. FYI .change and .click events don't work well either. I need the values summed up immediately they change dynamically. #grandmealstotal is one of the textfields that needs to be added, #usdgrandaccomtotal is the other textfield that needs to be added. results are alerted out and displayed in a textfield with id #gross_tripexpense. Below is what I'm using

$("#grandmealstotal").live('blur',function(){
var mealtotal=parseFloat($("#grandmealstotal").val());
var accomtotal=parseFloat($("#usdgrandaccomtotal").val());
var grosstotals=parseFloat(accomtotal+mealtotal);
alert(grosstotals)
$("#gross_tripexpense").val((grosstotals).toFixed(2));
})

Any help appreciated.

I have to add that I have now started using $("#formdiv").live('mousemove',function).... where #formdiv is the id of my form where the textfields reside. When the mouse is moved values get calculated. However I feel this is not very efficient and it doesn't create that "prompt" results displayed real time feel. — Maxi
– Maxi, Commented Oct 16, 2011 at 8:41

Darin Dimitrov · Accepted Answer · 2011-10-16 08:40:20Z

1

~~You could use the .keydown() or .keyup() event in this case:~~

$('#grandmealstotal').keyup(function() { var mealtotal = parseFloat($('#grandmealstotal').val()); var accomtotal = parseFloat($('#usdgrandaccomtotal').val()); var grosstotals = parseFloat(accomtotal + mealtotal); alert(grosstotals); $('#gross_tripexpense').val((grosstotals).toFixed(2)); });

Also make sure that you perform error handling as those parseFloat methods could fail if the user enters invalid numbers. You could use the isNaN function for this:

var mealtotal = parseFloat($('#grandmealstotal').val());
if (!isNaN(mealtotal)) {
    // use the mealtotal variable here
} else {
    alert('please enter a valid number for total meals');
}

UPDATE:

If the values are readonly and cannot change you could perform the calculation once the DOM is ready:

$(function() {
    ... do the calculation here
});

edited Oct 16, 2011 at 8:40

answered Oct 16, 2011 at 8:30

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

3 Comments

Darin Dimitrov Over a year ago

@Max, oops, missed this detail. In this case you don't need to subscribe to any event as their values cannot change. Simply perform the calculation in the $(document).ready.

Maxi Over a year ago

The textfields get their values changed periodically as the user navigates and selects various items. See my additional comment on a workaround.

Darin Dimitrov Over a year ago

@Max, in this case you will have to manually trigger the function that performs the calculation everytime you update those values.

Christian P · Accepted Answer · 2011-10-16 08:34:52Z

0

You could add an event handler for .change() event and then trigger the .change() event every time you update the values in your input.

answered Oct 16, 2011 at 8:34

Christian P

12.3k6 gold badges64 silver badges72 bronze badges

Collectives™ on Stack Overflow

Add values of textfields Jquery HTML

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related