2013-08-30 41 views
0

我創建了一個表單更新。每行都有一組文本框。 根據我的查詢結果,每個文本框都有自己的值。每列結尾處都有一個選擇框。你可以選擇VALID或INVALID。我的目標很簡單,如果用戶爲每一行選擇一個INVALID狀態。數量和價格以及總價值將被設置爲0,並且基於已設置爲選項的項目/行,下面的計算將會減少。如果無效,所選行將被扣除小計金額。如何使用觸發事件執行計算?

問題:

  1. 在觸發,如果用戶將狀態設置爲無效的I沒有 問題,但如果用戶觸發回選擇爲有效。我不能 回到我的價值。
  2. 如果用戶設置爲INVALID,則在小計中不會扣除總額。因爲我不知道該怎麼做。

這裏有一點我下面的代碼:

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); 

     } 

    }); 

這裏是環部分

$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']; 



} 

下面是總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> 

這裏的小提琴http://jsfiddle.net/y6d8m/4

+0

做出小提琴。\ –

+0

我怎樣才能做到這一點? – Jerielle

+0

在這裏粘貼你的代碼http://jsfiddle.net/並保存它 –

回答

1

當 「無效」 保存最後的數據

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

當用戶變回恢復它

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/

+0

是的先生,但我可以做到這一點。我的問題是觸發選擇回到原始狀態後,我無法再回到我的價值。例如,如果我有一個qty = 2和價格= 5,那麼總數= 10,小計也是10。如果用戶將選擇設置爲INVALID,則數量將被設置爲0以及價格和小計。如果我再次設定有效,我會再次回到我的舊值。 – Jerielle

+0

這裏是小提琴http://jsfiddle.net/y6d8m/ – Jerielle

+0

更新,請再試一次 – Parfait