Pick form field values and calculate totals using jquery

Question

I have a form with these rows:

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

I'd like to be able to pick the values from the quantity field, rate field and then calculate the amount which will be displayed in the "_amount" textfield. The amount field should be locked to prevent users from altering the values. Apart from a for loop how I can achieve this?

Answer 1

Add a css class to either one of the input fields or the table rows, and then use $.each() to iterate over them.

Answer 2

I would use PHP to do the actual calculations. Pass all field values to a PHP script using AJAX. I would recommend using jQuery's post function and serialize function together. Now for the PHP make sure you set your locale first.

setlocale(LC_MONETARY,'en_CA');

Now grab all the costs and multiply each one by their quantity. You now have a Number but you want it in currency format. Use the money_format function.

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

I use echo because you are sending it back to JavaScript with the AJAX return. Finally to stop users from editing a form field use the read-only attribute or hidden type.

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

Hope that helps!

Answer 3

If you put the number at the end instead of the middle: i.e.

invoice_invoice_line_items_attributes_rate_2

instead of

invoice_invoice_line_items_attributes_2_rate

Then you could do something like:

$('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() );
        });

And make the amount field read only. (Remember to check it on the php side anyway, in case the user doesn't have javascript enabled, or is trying to cheat.)