How to perform a computation using trigger event?

Question

I created a form list update. And every row has a sets of textbox. Each textbox has its own value based on my query result. And at the end of every column there is a selection box. And you can choose VALID or INVALID. My goal is simple, if the user select an INVALID status for each row. The value of the quantity and price and total will be set to 0 and the computation below will be decreased based on the the item/row that has been set to the selection. If INVALID, the selected row will be deducted to the subtotal amount.

Problems:

1. In triggering if the user set the status to INVALID I have no problem but if the user trigger the selection back to VALID. I can't get back again my value.
2. If the user set the to INVALID, there is no deduction of total in the subtotal. Becuase I don't know how to do that.

Here's a bit of my code below:

Here is my jquery section:

$('[id^=qty],[id^=price]').on('change',function() {

        var index = this.id.match(/\d+/)[0];
        var qty = parseInt($('#qty'+index).val());
        var price = parseFloat($('#price'+index).val());
        var total = 0;

        $('#total'+index).val((qty * price ? qty * price : 0).toFixed(2));

        var total = 0;
        $('[id^=total]').each(function(index){
            total+=parseFloat($(this).val()?$(this).val():0);
        });
        $('#sum_of_total').val(total.toFixed(2));

        var vatable = total / 1.12;
        var vatable_amt = vatable * 0.12;
        var totalVat = vatable + vatable_amt;

        $('#vatable').val(vatable.toFixed(2)); 
        $("#vatable_amount").val(vatable_amt.toFixed(2));
        $("#gtotal").val(totalVat.toFixed(2));

    });

    $('[id^=status_validate]').on('change',function(){

       var index = this.id.match(/\d+/)[0];

       var status_set = $("#status_validate"+index).val();
       var price_set = $("#price"+index).val();
       var qty_set = $("#qty"+index).val();
       var total_set = $("#total"+index).val();

       var temp_price = price_set;
       var temp_qty = qty_Set;
       var temp_total = tota_set;

       console.log(status_set);

       if(status_set == 'VALID'){

            $("#price"+index).val(price_set);
            $("#qty"+index).val(price_set);
            $("#total"+index).val(price_set);

       }else{

            price_set = 0.00;
            qty_set = 0.00;
            total_set = 0.00;

            $("#price"+index).val(price_set);
            $("#qty"+index).val(price_set);
            $("#total"+index).val(price_set);

       }

    });

And here is the loop part

$val = 0;

foreach($order_info_list->result_array() as $details){

    $val++;

    $vatable_input = $details['vatable_input'];
    $vatable_amount = $details['vatable_amount'];
    $total_amount_due = $details['total_amount_due'];

    echo "<tr>";
        echo "<td><input type='text' name='itemdesc[]' value = ".$details['item_desc']." /></td>";
        echo "<td><input type='text' name='qty[]' value=".$details['item_qty']." id='qty{$val}' /></td>";
        echo "<td><input type='text' name='price[]' value=".number_format($details['item_price'],2)." id='price$val' /></td>";
        echo "<td><input type='text' name='total[]' class='k-textbox' id='total{$val}' style='font-family: courier; text-align: right; background-color: lightgray; color: red' readonly='readonly' value='".$details['total']."' /></td>";
        echo "<td width='30%'>";

         $stat = $details['status'];

         echo "<select name='status[]' id='status_validate[$val]'>";    
             if($stat == 'VALID'){
                echo "<option value='VALID' selected='selected'>VALID</option>";
                echo "<option value='INVALID'>INVALID</option>";
             }else{
                echo "<option value='VALID'>VALID</option>";
                echo "<option value='INVALID' selected='selected'>INVALID</option>";
             }
          echo "</select>";
        echo "</td>";
    echo "</tr>";

    $idx = $details['poid'];

    echo "<input type='hidden' name='idx[]' value='{$idx}' />";

    $code_x = $details['order_code'];



}

Below is the displaying of total computaion

 <tr>
   <td></td>
   <td></td>
   <td></td>
   <td>VATable Amount:</td>
   <td><input type="text" class="k-textbox" value="0.00" readonly="readonly" style="color: red; text-align: right; font-family: courier" name="vatable" id="vatable" /></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
   <td></td>
   <td>VAT Input:</td>
   <td><input type="text" class="k-textbox" value="0.00" readonly="readonly" style="color: red; text-align: right; font-family: courier" name="vatable_amount" id="vatable_amount" /></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>TOTAL AMOUNT DUE:</td>
    <td><input type="text" class="k-textbox" value="0.00" readonly="readonly" style="color: red; text-align: right; font-family: courier" name="subtotal" id="gtotal" /></td>
  </tr>

Here's the fiddle http://jsfiddle.net/y6d8m/4

Answer 1

When "INVALID" save the last data

        $("#price"+index).attr('data-last',price_set);
        $("#qty"+index).attr('data-last',qty_set);
        $("#total"+index).attr('data-last',total_set);

When user change back restore it

restoreLast($("#price"+index));
restoreLast($("#qty"+index));
restoreLast($("#total"+index));

function restoreLast(e){
    e.val(e.data('last'));
    //trigger automatic computation
    e.change();
}

http://jsfiddle.net/y6d8m/3/