接表單字段值和使用jquery

Question

我有這些行的形式計算總計：

   <td> - </td> 
       <input id="invoice_invoice_line_items_attributes_2_item_type" name="invoice[invoice_line_items_attributes][2][item_type]" type="hidden" value="other" /> 
       <td><input id="invoice_invoice_line_items_attributes_2_description" name="invoice[invoice_line_items_attributes][2][description]" size="30" type="text" /></td> 
       <td><input class="short" id="invoice_invoice_line_items_attributes_2_quantity" name="invoice[invoice_line_items_attributes][2][quantity]" size="30" type="text" /></td> 
       <td><input class="short format-currency" id="invoice_invoice_line_items_attributes_2_rate" name="invoice[invoice_line_items_attributes][2][rate]" size="30" type="text" /></td> 
       <td><input class="short format-currency" id="invoice_invoice_line_items_attributes_2_amount" name="invoice[invoice_line_items_attributes][2][amount]" size="30" type="text" /></td> 

      </tr> 

      <tr> 
      <input id="invoice_invoice_line_items_attributes_3_invoice_id" name="invoice[invoice_line_items_attributes][3][invoice_id]" type="hidden" /> 

       <td> - </td> 
       <input id="invoice_invoice_line_items_attributes_3_item_type" name="invoice[invoice_line_items_attributes][3][item_type]" type="hidden" value="other" /> 
       <td><input id="invoice_invoice_line_items_attributes_3_description" name="invoice[invoice_line_items_attributes][3][description]" size="30" type="text" /></td> 
       <td><input class="short" id="invoice_invoice_line_items_attributes_3_quantity" name="invoice[invoice_line_items_attributes][3][quantity]" size="30" type="text" /></td> 
       <td><input class="short format-currency" id="invoice_invoice_line_items_attributes_3_rate" name="invoice[invoice_line_items_attributes][3][rate]" size="30" type="text" /></td> 
       <td><input class="short format-currency" id="invoice_invoice_line_items_attributes_3_amount" name="invoice[invoice_line_items_attributes][3][amount]" size="30" type="text" /></td> 

      </tr> 

      <tr> 
      <input id="invoice_invoice_line_items_attributes_4_invoice_id" name="invoice[invoice_line_items_attributes][4][invoice_id]" type="hidden" /> 

       <td> - </td> 
       <input id="invoice_invoice_line_items_attributes_4_item_type" name="invoice[invoice_line_items_attributes][4][item_type]" type="hidden" value="other" /> 
       <td><input id="invoice_invoice_line_items_attributes_4_description" name="invoice[invoice_line_items_attributes][4][description]" size="30" type="text" /></td> 
       <td><input class="short" id="invoice_invoice_line_items_attributes_4_quantity" name="invoice[invoice_line_items_attributes][4][quantity]" size="30" type="text" /></td> 
       <td><input class="short format-currency" id="invoice_invoice_line_items_attributes_4_rate" name="invoice[invoice_line_items_attributes][4][rate]" size="30" type="text" /></td> 
       <td><input class="short format-currency" id="invoice_invoice_line_items_attributes_4_amount" name="invoice[invoice_line_items_attributes][4][amount]" size="30" type="text" /></td> 

      </tr> 

我想能夠挑選從數量字段中的值，速率字段然後計算將在「_amount」文本字段中顯示的金額。數量字段應被鎖定以防止用戶更改值。除了for循環，我如何實現這一目標？

Answer 1

將css類添加到輸入字段或表格行中的任意一個，然後使用$.each()對它們進行迭代。

Answer 2

我會用PHP來做實際的計算。使用AJAX將所有字段值傳遞給PHP腳本。我會推薦使用jQuery的post函數和serialize函數在一起。現在爲PHP確保你先設置你的語言環境。

setlocale(LC_MONETARY,'en_CA'); 

現在抓住所有的成本，並乘以它們的數量。你現在有一個號碼，但你想要它的貨幣格式。使用money_format功能。

echo money_format('%n', $cost); 

我使用echo，因爲您使用AJAX返回將它發送回JavaScript。最後，要阻止用戶編輯表單字段，請使用只讀屬性或隱藏類型。

<input type="text" readonly="readonly" /> 
<input type="hidden" /> 

希望有所幫助！

Answer 3

如果你把號碼末，而不是中間：中即

invoice_invoice_line_items_attributes_rate_2 

代替

invoice_invoice_line_items_attributes_2_rate 

然後，你可以這樣做：

$('input[id^=invoice_invoice_line_items_attributes_rate],' + 
     'input[id^=invoice_invoice_line_items_attributes_quantity]').change(
     function() { 
      var grab_n = new RegExp('/[0-9]+$/'); 
      var i = parseInt(grab_n.exec($(this).attr('id'))); 
      $('#invoice_invoice_line_items_attributes_amount_' + i).val(
       $('#invoice_invoice_line_items_attributes_quantity_' + i).val() * 
       $('#invoice_invoice_line_items_attributes_rate_' + i).val()); 
     }); 

而且使金額字段只讀。 （不管怎麼樣，如果用戶沒有啓用javascript或者試圖作弊，請記住在php端檢查它。）