If table cell equals 100 then

Question

I have the following table that uses Javascript to calculate the sum of cells. When the inputs are entered Javascript the sums up the total of quantity and displays it in TD id="totalSum".

Ultimately I need to have it where when the totalSum equals 100, then execute php code.

How do I get PHP to read the data in the totalSum and then execute PHP when it equals 100?

HTML-

<table id="mytable" width="394">
    <colgroup>
        <col style="width: 50px;">
        <col>
        <col style="width: 60px;">
        <col style="width: 110px;">
    </colgroup>
    <tbody>
        <tr>
            <th  width="130" height="43"></th>
            <th width="52">Weight Select</th>
            <th width="181">New P</th>
        </tr>
        <tr>
            <td align="center" width="130">&nbsp;</td>
            <td align="center">
                <input type="text" size="2" value="1" id="qty_item_1" name="sum" >
            </td>
            <td align="center" id="total_item_1"></td>
        </tr>
        <tr>
             <td align="center" width="130"></td>
            <td align="center"  >
                <input type="text" size="2" value="1" id="qty_item_2" name="sum" >
            </td>
            <td align="center" id="total_item_2"></td>
        </tr>
        <tr class="tr">
            <td align="left" colspan="1"><strong>Grand Total:</strong></td>
            <td width="11" align="left" id="totalSum"></td>
        </tr>
    </tbody>
</table>

Javascript-

<script type="text/javascript">
    var bIsFirebugReady = (!!window.console && !!window.console.log);
    $(document).ready(function (){
        // update the plug-in version
        $("#idPluginVersion").text($.Calculation.version);

                                /*
                                $.Calculation.setDefaults({
                                onParseError: function(){
                                this.css("backgroundColor", "#cc0000")
                                }
                                , onParseClear: function (){
                                this.css("backgroundColor", "");
                                }
                                });
                                */
        // bind the recalc function to the quantity fields
        $("input[id^=qty_item_]").bind("keyup", recalc);

        // run the calculation function now
        recalc();

        // automatically update the "#totalSum" field every time
        // the values are changes via the keyup event
        $("input[name^=sum]").sum("keyup", "#totalSum");

        // automatically update the "#totalAvg" field every time
        // the values are changes via the keyup event
        $("input[name^=avg]").avg({
            bind:"keyup"
            , selector: "#totalAvg"
                // if an invalid character is found, change the background color
            , onParseError: function(){
                this.css("backgroundColor", "#cc0000")
            }
            // if the error has been cleared, reset the bgcolor
            , onParseClear: function (){
                this.css("backgroundColor", "");
            }
        });

        // automatically update the "#minNumber" field every time
        // the values are changes via the keyup event
        $("input[name^=min]").min("keyup", "#numberMin");

        // automatically update the "#minNumber" field every time
        // the values are changes via the keyup event
        $("input[name^=max]").max("keyup", {
            selector: "#numberMax"
            , oncalc: function (value, options){
                // you can use this to format the value
                $(options.selector).val(value);
            }
        });

        // this calculates the sum for some text nodes
        $("#idTotalTextSum").click(function() {
            // get the sum of the elements
            var sum = $(".textSum").sum();

            // update the total
            $("#totalTextSum").text("$" + sum.toString());
        });

        // this calculates the average for some text nodes
        $("#idTotalTextAvg").click(function() {
            // get the average of the elements
            var avg = $(".textAvg").avg();

            // update the total
            $("#totalTextAvg").text(avg.toString());
        });

    });

    function recalc(){
        $("[id^=total_item]").calc(
            // the equation to use for the calculation
            "qty * price / 100",
            // define the variables used in the equation, these can be a jQuery object
        {
            qty: $("input[id^=qty_item_]"),
            price: $("[id^=price_item_]")
        },

        // define the formatting callback, the results of the calculation are passed to this function
        function (s){
            // return the number as a dollar amount
            return "" + s.toFixed(2);
        },
            // define the finish callback, this runs after the calculation has been complete
            function ($this){
                // sum the total of the $("[id^=total_item]") selector
                var sum = $this.sum();
                $("#grandTotal").text(
                    // round the results to 2 digits
                    "" + sum.toFixed(2)
                );  
            }
        );
    }
</script>

Answer 1

Your question does not show how you trigger summing up the values, or checking the value of cell id="totalSum", so in my solution I added a button id="mybutt" to do that.

Working jsFiddle here

All you need to know is in the above jsFiddle, and in the section below discussing the some_php_file.php. What follows now is a description of how the code works, if you need that.

---

1. First, we get the collection of all table cells where the id starts with qty_item:

   $('[id^=qty_item_]')

2. Next, we iterate through this collection using the .each method:

   var ttl = 0;
$('[id^=qty_item_]').each(function() {
    str = $(this).val();
    ttl += Number(str);
});

3. Then, inject the total into the cell with id="totalSum"

   $('#totalSum').text(ttl).trigger('change');

Note that we trigger a change event on that same element (table cell). That immediately fires this code:

$('#totalSum').change(function() {
    var sum = $(this).text();
    alert('Value: ' + sum);
    if (Number(sum) > 99) {
        alert('Value > 100. AJAX will begin, but cannot finish because jsFiddle cannot do ajax. Just look at syntax.').
        $.ajax({
            type: "POST",
            url: "some_php_file.php",
            data: 'myTotalSum='+sum,
            success:function(somedata){
                alert(somedata);
            }
        });
    }
});

---

In the AJAX code block, notice the URL that is specified. A PHP file with the same name must exist on the server (in same folder as your HTML code, for this example). It will receive the info sent via AJAX in a POST variable called myTotalSum.

Once you have that number, your PHP file can stick it into the database. If you want, you can even have the PHP file send information back to the webpage (it arrives in the success function of the AJAX code block). Note that the javascript on the webpage continues processing without waiting for the PHP page to finish. If you need the javascript to wait, then you would insert async: false, somewhere near the top of that code block.

To see this actually work, create a text file with this name and these contents:

some_php_file.php

<?php
    $theSum = $_POST['myTotalSum'];
    $r = '<h2>Mr. PHP received this number:</h2><h1>' .$theSum. '</h1>';
    echo $r;

The echo in the PHP file sends the contents of variable $r back to the AJAX code block, where it is received in the success function. Important: this incoming data must be dealt with here, and no where else. It will not exist outside the success function.

To access received data outside the success function, stick the received data into an element, such as a hidden input element, like this:

success:function(mydata){
    $('#a_hidden_input_element').val(mydata);
}

---

Here is an SO post with some additional AJAX code examples.