Need help in adding values from a table row, dynamically

[kigoobe]

Well friends, I am having a table like this ...

Where, the left most and right most columns have zero values when the page loads. As we click on the + or - sign associated with the left most column, the value of the left most column increases or decreases by 1. The value of the right most column also changes at the same time, and gives the value of the left most column * the value of the third column, prix.

Here are the two functions that I am using for this.

function addChoc(str,str2,str3) {
    chocobox = document.getElementById(str);
    chocobox.value = Number(chocobox.value)+1;
    chocoPrice = document.getElementById(str2);
    chocoPrice.innerHTML = Number(str3) * Number(chocobox.value);
}
function subChoc(str,str2,str3) {
    chocobox = document.getElementById(str);
    if (chocobox.value != 0) {
        chocobox.value = Number(chocobox.value)-1;
        chocoPrice = document.getElementById(str2);
        chocoPrice.innerHTML = Number(str3) * Number(chocobox.value);
 
    } else {
        chocobox.value = chocobox.value;
    }
}
 

where,

str = value of first column, qnty.
str2 = value of last column, total
str3 = value of third column, prix

till now, we are dealing with a single row, and so far, everything is fine, working as it should (I have tested only in FF till now).

The rows of the given table is generated by php, using foreach loop, fetched from mySQL.

*************** *************** *************** *************** *************** ***************

The problem starts now. What I want, is as I click on the + or - sign, along with the two values that are already changing, the value of the last row, right most column should also change (grande totale). And here I am totally lost at this moment ... even after spending several hours pulling out my hairs I was unable to find a solution that works.

Is there anybody who can help me out? :)
Thanks a lot for your time.

[kigoobe]

Some 3 hours later (including my dinner) ... here is what I have got ...

function addChoc(str,str2,str3,chocArray,id) {
    chocobox = document.getElementById(str);
    chocobox.value = Number(chocobox.value)+1;
    chocoPrice = document.getElementById(str2);
    chocoPrice.innerHTML = Number(str3) * Number(chocobox.value);
    chocArray[id] = chocoPrice.innerHTML;
    chocoTotal = document.getElementById('gr_totale');
    chocoTotal.innerHTML = Number(chocArray[id]);
}
 

I am now sending the whole thing in an array and dynamically changing the price. As in the above code, the last line displays the total of a given row by calling it with its id as array key. However, since I am passing the whole array here, I could easily fetch their values and add them to get the desired result.

Say, a javascript equivalent of something like ...

[php]
$total = '';
foreach ($array as $v) {
$total = $total + $v;
}
[/php]

If this works, hopefully the issue will be solved. :)

EDIT

The following is giving NaN error.

function addChoc(str,str2,str3,chocArray,str4) {
    chocobox = document.getElementById(str);
    chocobox.value = Number(chocobox.value)+1;
    chocoPrice = document.getElementById(str2);
    chocoPrice.innerHTML = Number(str3) * Number(chocobox.value);
    chocArray[str4] = chocoPrice.innerHTML;
    chocoTotal = document.getElementById('gr_totale');
    var total = "";
    for(i=0;i<chocArray.length;i++) {
        total = Number(total) + Number(chocArray[i]);
    }
    chocoTotal.innerHTML = Number(total);
}
 

hmmm .... :(:(:(

EDIT 2 @ another hour later ...

solved ... js was not recognizing the $key=>$value type of array as array and was treating them as object ... :) solved now. :)

[gits]

hi ...

glad to hear you got it working for yourself ... :) and telling so and even the solution. post back to the forum anytime you have more questions ...

kind regards

[kigoobe]

Thanks gits. That's a great spirit that I have seen among the moderators of this site. :)

Here is my function at present, and it's doing all what it should do, exactly as I want.

function subChoc(qnty,totale,prix,chocArray,id,action) {
    chocobox = document.getElementById(qnty);
    if ( (action == 'plus') || ((action == 'minus') && (chocobox.value != 0)) ) {
        if (action == 'plus') {
            chocobox.value = Number(chocobox.value)+1;
        } else if (action == 'minus') {
            chocobox.value = Number(chocobox.value)-1;
        }
        chocoPrice = document.getElementById(totale);
        chocoPrice.innerHTML = Number(prix) * Number(chocobox.value);
        chocArray[id] = chocobox.value + "~" + chocoPrice.innerHTML;
        chocoTotal = document.getElementById('gr_totale');
        var total = 0; var price = 0;
        for(var i=0;i<chocArray.length;i++) {
            var splitMe = chocArray[i].split("~");
            if (Number(splitMe[0]) == 0) {
                price = 0;
            } else {
                price = Number(splitMe[1]);
            }
            total = Number(total) + Number(price);
        }
        chocoTotal.innerHTML = total;
    } else {
        chocobox.value = chocobox.value;
    }
}
 

I am sure that this may not be the perfect script, given that I am new in JS, I hope that in the future I will be able to make similar functions in a more 'pure', 'OO' way.

Now, later down the page, I am calling a function like this =>

getAjax('ajax/getStatus.php','getStatus','text','quantity','product','','');
 

Here in this function, I need to pass two arrays, one array consisting all the ids from the above table as product, and one array consisting of all the quantities (chocobox.value ) including zeroes where the quantities were not altered, as quantity. I am a bit lost about how to construct such arrays and pass that to the above function getAjax.

I would be greatful if someone can help me here. If by that time I found a solution myself, I will be post it back. :)

[gits]

hi ...

you want to create the arrays from the table?

kind regards

[kigoobe]

Hi gits. Thanks for your reply. Actually I need these two arrays so that later I can work on data fetched from this table.

I am not sure how to make the two arrays (php | javascript | ?) and importantly, how to pass the two arrays in the function getAjax.

*************** *************** *************** *************** *************** ***************

Actually, whenever I am calling the function subChoc, I am sending the related id and thereby getting the quantity value. Thus, probably I can have a key value pair with these two in the function itself, and probably I can even make an array there.

Probably the bigger question here is how to pass the array in my getAjax function? !!!

:(:(:(

[gits]

no problem :) ... we have to retrieve the nodes of the table and store the value in the corresponding arrays ... so could you please post your current table-html-code, so that we could see how to parse the table?

the alternative with the subChoc method is good ... we would have to store the used ids and values and fill the arrays with ids and zeros for the unhandled items ...

kind regards

[gits]

Probably the bigger question here is how to pass the array in my getAjax function? !!!

when you have an array:

var arr = [1, 2, 3];
 

you may simply pass it to a function like this:

function use_array(arr) {
    alert(arr);
}

kind regards

[kigoobe]

Oh thanks Gits ... you mean that passing an array to a function is alike passing a normal variable !!! Then it's really great. For making the array, I can simply fo with the subChoc() ... would be simpler that way ... :)

You don't know how much you have helped me just now. Thanks a lot. Thanks again Gits. :)

[kigoobe]

May be one question more here. The said array will be inside the function subChoc. That would mean, I will have to call the function subChoc somewhere inside the function getAjax to transfer the array properly, isn't it?