CODEWITHSUNDEEP
javascriptjquery
C0ol_Cod3r
C0ol_Cod3r

Reputation: 949

Adding AJAX forms inputs together, on user update

UPDATE 3

James, the MondayTotal, is an Class in span tags, like,

    <span class="TimebreakdownTotalWeek">Mon</span>
<span class="MondayTotal">0</span>

UPDATE 2

This is the function that loads the whole week, Monday though to Sunday, and gives a total. I have tried, this function changing the '.totalhours' class to my mondaytotal, which then loads the weekly total into that var. Next I add 'Monday' before my +Count, that only seems to add the current rows monday into my mondaytotal class.

So for example, I have three rows with, '.Monday0', '.Monday1' and '.Monday2'. My monday total, will hold the total value, but overrides it when you enter the next value. So I enter 1 into Monday0, MondayTotal is then 1 but when you enter 2 into Monday1 instead of MondayTotal being 3, its just overrides it and now holds 2 - So basically it does not add the rows together.

I think this is due (at lest the way I see it, please correct me if I am wrong), that its the 'index' each time it just resets to 0 and does not loop right.

 var LoadHourTotals = function(Count) {
    if (typeof Count === "undefined" ) {
        var $total = $('.TotalHours');
        var $value = $('.Input');
    } else {
        var $total = $('.'+Count);
        var $value = $('.'+Count);
    }

    $value.on('input', function (e) {
        var total = 0;
        $value.each(function (index, elem) {
            if (!Number.isNaN(parseFloat(this.value, 10))) total = total + parseFloat(this.value, 10);
        });
        $total.html(total);
    });
} //End

UPDATE

James, do you mean the html form that I input into? If so, it is not that easy, it is built using CakePHP form helper, but there is the code,

<input name="data[0][maintime]" class="TimebreakdownInput Monday0" type="text">

Then when the user clicks to load another form element, it will add,

<input name="data[1][maintime]" class="TimebreakdownInput Monday1" type="text">

Then next, for example,

<input name="data[2][maintime]" class="TimebreakdownInput Monday3" type="text">

Then same for all the other days. If that is not what you where asking for, please explain more what you need,

Thanks.

I am working on a form that adds the total number entered total for a week, giving weekly total. I found a function on a post on here, and with a few changes does what I want it to do for the whole week.

But now I am working on adding together all the days, so I have a total for all Mondays, Tuesdays etc. and also a grand total off all the week (but I have not worked on that let).

var LoadDailyTotal = function(Count) {
    var $WeekTotal = $('.MondayTotal');

    if (typeof Count === "undefined" ) {
        var $WeekValue = $('.Monday0');
    } else {
        var $WeekValue = $('.Monday'+Count);
    }

    $WeekValue.on('input', function(e) {
        var totalweek = 0;
        var currentTotal = parseFloat ($('.MondayTotal').html() );

        $WeekValue.each(function (index, elem) {
            if (!Number.isNaN(parseFloat(this.value, 10))) totalweek = totalweek + parseFloat(this.value, 10);
        });
        $WeekTotal.html(currentTotal + totalweek);
    });
}

Right now, this sort of works, but I don't think the loop is working right. One the defult row that loads, you enter (for example) 1, then add the new AJAX loaded row, and say you enter 2, that does make 3 in the total. But if you update the first row, to 2, it should be 4 but I get 5, so its keeping the total, which I don't want. What I need is it to update the total on each row, if and when the user changes.

Sorry if I have not explained myself right, please give me a change to explain better, if needed or if you want more code.

Thanks,

Upvotes: 3

Views: 111

Answers (2)

C0ol_Cod3r
C0ol_Cod3r

Reputation: 949

This is the function that I use that gets it to work, I yes like Sonicdeadlock says, I made all the mondays, to same class by removing the loop.

  var LoadMondayTotals = function() {
    $('.TimebreakdownInput').change(function() {
        var MondayInputs = []; //Array to store all monday daily inputs
        var MondayTotals = 0; //Store Array total for display

        $(".Monday").each(function() { 
            var values = parseFloat( $(this).val() );   
            if (isNaN(values)) { values = 0; } //Set value to 0 if its not a number
            MondayInputs.push(values);
        });

        $.each(MondayInputs, function() {
            MondayTotals += this; //Count though array, add into total
        });

        $('.MondayTotal').html(MondayTotals); //Display / Add total into HTML
    });
 } //End of LoadMondayTotals

Thanks

for your help

Upvotes: 0

Sonicdeadlock
Sonicdeadlock

Reputation: 88

If you added a class for each day then you could for example select all the mondays then add up their values.

<input name="data[0][maintime]" class="TimebreakdownInput Monday0 Monday" type="text">
<input name="data[1][maintime]" class="TimebreakdownInput Monday1 Monday" type="text">
<input name="data[2][maintime]" class="TimebreakdownInput Monday2 Monday" type="text">

var getDayTotal = function(day){
   var days=$('.'+day);
   var total =0;
   days.each(function(){
       total+=parseFloat(this.value, 10);
   });
   return total;
}

$('.mondayTotal').html(getDayTotal('monday'));

Upvotes: 2

Related Questions