Page 1 of 1

Update fields Jquery

Posted: Sat Feb 09, 2013 9:33 am
by japeth
Hi,

I'm trying to update my fields once I perform changing values from other fields.
please see my fields.

textfield1 = 100 <--____VALUES---
textfield2 = 100 <--____VALUES---
textfieldTotal = 200 <--___ Total ( Need to change this fields every time i perform simple addition to my textfield1 and textfield2.

Any good tutorial? I know it can be done in Jquery.

thank you.

Re: Update fields Jquery

Posted: Sat Feb 09, 2013 12:42 pm
by Christopher
Register the change event for textfield1 and textfield2. In the function you register update the value of textfieldTotal from the values of textfield1 and textfield2.

There are docs and examples here: http://api.jquery.com/change/

Re: Update fields Jquery

Posted: Tue Feb 12, 2013 5:50 pm
by pickle
When you do make some headway, post your code here, because people new to jQuery rarely use it as efficiently as they could be, we might be able to give you some further pointers.

Re: Update fields Jquery

Posted: Mon Feb 18, 2013 12:25 am
by japeth
Hi,

Can somebody help me to solve this problem?

I have form, form contains these fields.

Principal - textfield1
Interest - textfield2
Service Charge - textfield3
and Total. - textfield4

scenario is this.
I will input an amount of (2000.00) in Principal(textfield1) , automatically the Total(textfield4) will change from 0.00 to 2000.00, and when I input 12 in Interest(textfield2) the total will update again to 2240.00 same with service charge. if i input 100 in service charge(textfield3) it will total to 2340.00.

All best.

Re: Update fields Jquery

Posted: Mon Feb 18, 2013 1:09 am
by requinix
You've been given help already. Scroll up. So what progress have you made so far?

Re: Update fields Jquery

Posted: Mon Feb 18, 2013 1:37 am
by japeth
Here's,

but I want the text total to automatically change everytime i change the value in textfields without going to other field.

Code: Select all

$(document.body).on('change', 'input[name]', function() {
    var form = document.forms['calculator'],
        prin = parseFloat(form.principal.value),
        intr = parseFloat(1 + form.interest.value),
        serv = parseFloat(form.service.value);

    $('[name=total]').val(prin * intr + serv);  
});

$(function () {
    // manually trigger the change event to display
    // the total using the default values
    $(document.forms['calculator'].principal).change();
})
thanks,

s.dot| - Moderator Edit - Please use the formatting tags when posting code.

Update fields Jquery

Posted: Thu Jun 06, 2013 5:45 am
by rejsertil
The input element has lost focus jquery input field change even when value is changed via jquery . when jQuery itself tries to change the elements but not when the elements gets changed from outside jQuery .