Calculate total of dynamic values of readonly inputs. Jquery and AJAX

Question

So I have my form pretty much done and I need to calculate the total values of input fields after AJAX fills them based on user selects. I have tried and tried and tried to find a solution but nothing is working... ugh.

Here's the html for the input fields that need to be calculated and the field that the sum needs to be returned to:

<input type="text" class="form-control prices" id="lt1total" placeholder="Amount" value="" readonly>
<input type="text" class="form-control prices" id="lt2total" placeholder="Amount" value="" readonly>
<input type="text" class="form-control prices" id="lt3total" placeholder="Amount" value="" readonly>

<input type="text" class="form-control disabled" id="lttotal" placeholder="Amount" value="" readonly>

Here is the AJAX request (there is one for each they all work correctly):

$.ajax({
        method: 'GET',
        url: 'example.url',
        data: {
            lt1datetype: lt1datetype,
            lt1tt: lt1tt,
        }
    }).done(function(result) {
        console.log('', result);
        $('#lt1total').val(result);
    });

And this is the only jquery function that I have gotten to even put a value for #lttotal :

$(document).ready(function() {
    var sum = 0;
    $(".prices").each(function(){
        sum += Number($(this).val());
    });
    $("#lttotal").val(sum);
});

It only outputs 0 for the amount. The values that AJAX is getting are like this 123.00 or 1234.00 I'm stuck and aggravated. Any help or direction would be greatly appreciated.

what does "there is one for each" mean? If you make a request for each input then you will need to run calculation code after all requests are done to do the totals. Not really clear without clarification — charlietfl
– charlietfl, Commented Dec 13, 2016 at 2:06
There is an AJAX request for each amount generated for each lift ticket. So to get the #lt1total there is an AJAX request to the database to extract a field value based on user input and populated into value of #lt1total. There is one for each #lt1total, #lt2total, #lt3total. — Bryant Pugh
– Bryant Pugh, Commented Dec 13, 2016 at 2:18
So I ended up just making an update total button and binding the function to a .click and a checkbox on change before the user can hit the submit button. Thank you all anyways! — Bryant Pugh
– Bryant Pugh, Commented Dec 13, 2016 at 3:22

charlietfl · Accepted Answer · 2016-12-13 02:23:56Z

1

Use $.when to run the calculations code after all the requests have been completed.

var request1 = $.ajax({
        method: 'GET',
        url: 'example.url',
        data: {...}
    }).done(function(result) {
        console.log('', result);
        $('#lt1total').val(result);
    });

var request2 = $.ajax({
        method: 'GET',
        url: 'example.url',
        data: {...}
        }
    }).done(function(result) {
        console.log('', result);
        $('#lt2total').val(result);
    });

$.when(request1, request2....., requestn).done(function(){
    // set totals here instead of on page load
})

answered Dec 13, 2016 at 2:23

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Collectives™ on Stack Overflow

Calculate total of dynamic values of readonly inputs. Jquery and AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related