Выберите значения поля формы и рассчитайте итоги, используя 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

Если поставить цифру в конце вместо середины: то есть

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

И сделать поле количества доступным только для чтения. (Не забудьте проверить его на стороне php в любом случае, если у пользователя не включен javascript или он пытается обмануть.)

Answer 3

Я бы использовал PHP для выполнения реальных расчетов.Передайте все значения полей в PHP-скрипт, используя AJAX.Я бы порекомендовал использовать функцию jQuery post и serialize .Теперь для PHP убедитесь, что вы сначала установили свой язык.

setlocale(LC_MONETARY,'en_CA');

Теперь возьмите все затраты и умножьте каждую на их количество.Теперь у вас есть номер, но вы хотите его в формате валюты.Используйте функцию money_format .

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

Я использую echo, потому что вы отправляете его обратно в JavaScript с возвратом AJAX.Наконец, чтобы запретить пользователям редактировать поле формы, используйте атрибут «только для чтения» или скрытый тип.

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

Надеюсь, это поможет!