Как использовать функцию Javascript для входных элементов в a для l oop. Django

Question

Я работаю над формой Django, которая может вычислять значения в режиме реального времени. Я хотел бы, чтобы функция javascript работала для всех строк, которая состоит из 3 полей ввода каждое. Я попытался присвоить каждому полю ввода идентификатор, за которым следовал счетчик forl oop. Я также перебрал функцию, надеясь, что она будет работать для всех идентификаторов, a1, a2, a3 ... b1, b2, b3 ... c1, c2, c3 ... Однако функция работала только для последней строки ,

Вот javascript Я использовал:

<script type="text/javascript">

  for (i = 0; i < {{ total_rows|safe }}; i++) {  
    $('input').keyup(function(){ 
        var firstValue  = Number($('#a'+i).val());  
        var secondValue = Number($('#b'+i).val());
        document.getElementById('c'+i).value = firstValue * secondValue;
    });
  }

</script>

Вот мой шаблон:

<form>
{% csrf_token %}
  <table>
    <thead>
      <tr>
        <th>Quantity</th> 
        <th>Unit Price</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      {% for item, amount in loop_list %}
      <tr>
        <td>
          <input id="a{{ forloop.counter }}" type="text" class="form-control" placeholder="" name="quantity1" value="{{ item.quantity }}">
        </td>
        <td>
          <input id="b{{ forloop.counter }}" type="text" class="form-control" placeholder="" name="unit_price1" value="{{ item.product.unit_price }}">
        </td>
        <td>
          <input id="c{{ forloop.counter }}" type="text" class="form-control" placeholder="{{ amount }}" readonly>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</form> 

Answer 1

Вы связываете все входные данные несколько раз с несколькими обработчиками ключей. Однако вам не нужно использовать идентификаторы здесь; l oop над строками в JavaScript. Я немного упростил разметку здесь.

(Однако вам необходимо иметь уникальные name с для каждого ввода, если вы планируете отправить эту форму обратно в Django!)

{% for item, amount in loop_list %}
<tr class="calc-row">
  <td>
    <input class="quantity" value="{{ item.quantity }}">
  </td>
  <td>
    <input class="unit-price" value="{{ item.product.unit_price }}">
  </td>
  <td>
    <input class="amount" readonly>
  </td>
</tr>
{% endfor %}

С установленными классами вы можете связываться с вводом количества и цены за единицу только один раз, и обработчик событий просматривает элементы в строке.

$("input.quantity, input.unit-price").keyup(function() {
  var $row = $(this).closest("tr.calc-row");
  var quantity = Number($row.find(".quantity").val());
  var unitPrice = Number($row.find(".unit-price").val());
  $row.find(".amount").val(quantity * unitPrice);
});