Умножить два поля в форме Django и заполнить третье поле с результатом

Question

Я создаю форму в своем приложении django следующим образом:

views.py

@method_decorator([login_required, client_required], name='dispatch')
class MaterialRequestFormView(CreateView):
    model = MaterialRequest
    template_name = 'packsapp/client/materialRequestForm.html'
    fields = "__all__"

    def form_valid (self, form):
        product = form.save(commit=False)
        product.save()
        messages.success(self.request, 'The material request was created with success!')
        return redirect('client:mat_req_table')

models.py

class MaterialRequest(models.Model):
    owner = models.ForeignKey(Client, on_delete=models.CASCADE, related_name='allotment_sales')
    flow = models.ForeignKey(Flow, on_delete=models.CASCADE, related_name='flow')
    kit = models.ForeignKey(Kit, on_delete=models.CASCADE, related_name='kit')
    quantity = models.IntegerField(default=0)
    is_allocated = models.BooleanField(default=False)

    quantity_p1 = models.IntegerField(default=0)
    quantity_p2 = models.IntegerField(default=0)
    quantity_p3 = models.IntegerField(default=0)
    quantity_p4 = models.IntegerField(default=0)
    quantity_p5 = models.IntegerField(default=0)

html

 <h2>Material Request Form</h2>

    <div class="row">
        <div class="col-md-6 col-sm-8 col-12">
            <form method="post" id="MaterialRequestForm" data-kit-url="{% url 'employee:ajax_load_kit' %}"
                  data-product-url="{% url 'employee:ajax_load_product' %}"
                  novalidate>
                {% csrf_token %}
                {{ form|crispy }}
                <button type="submit">Save</button>
            </form>
        </div>
    </div>

    <div id="products-table">

    </div>

    <script>

        $("#id_flow").change(function () {
            console.log("function running");
            var url = $("#MaterialRequestForm").attr("data-kit-url");
            var flowId = $(this).val();

            $.ajax({

                url: url,
                data: {
                    'flow': flowId
                },
                success: function (data) {
                    $("#id_kit").html(data);
                    console.log(data);
                }
            });

        });
    </script>

    <script>

        $("#id_kit").change(function () {
            console.log("function running");
            var url = $("#MaterialRequestForm").attr("data-product-url");
            var kitId = $(this).val();

            $.ajax({

                url: url,
                data: {
                    'kit': kitId
                },
                success: function (data) {
                    $("#products-table").html(data);
                }
            });

        });
    </script>

Ajax - получить таблицу.

Могу ли я изменить ее так, чтобы при вводе количества она умножаласьstd quantity из таблицы с этим значением и заполнить его в соответствующих столбцах?

Рис для лучшего уточнения:

Таблицасоздается следующим образом:

<tbody>
    {% for product in products %}
    <tr>
        <td>{{ product.id }}</td>
        <td>{{ product.product_name }}</td>
        {% for i in quantities %}
            {% if forloop.counter == forloop.parentloop.counter %}
                <td id="q1">{{ i }}</td>
            {% endif %}
        {% endfor %}
    {% endfor %}
    </tr>
    </tbody>

Для упрощения: умножьте Quantity на Std Qty и заполните Quantity p1

Answer 1

Вы можете сделать это легко, используя jquery. Присвойте id полям в forms.py,

Например, #std будет идентификатором std и #quantity для поля количества.

 $('#quantity').change(function(){
     std = $('#std').val();
     quantity = $('#quantity').val();
     x = parseInt(std) * parseInt(quantity);
     // Now assign x to your respective field 
 });

Таким образом, динамическое значение будет изменено, и вызатем можно просто сохранить его, используя форму django или что-то еще.

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

Answer 2

Похоже, вы хотите выполнить это на стороне клиента перед отправкой данных. Это, как вы можете подозревать, лучше всего делать с javascript. Поскольку вы уже используете jquery, я бы посоветовал заглянуть в обработчик change: https://api.jquery.com/change/

Вы бы прослушали изменения элементов с raw data, а затем вычислили новые значенияи заполните те, которые являются динамическими. В приведенной выше документации есть несколько примеров.

Итак, как бы вы узнали идентификаторы элементов? Используйте веб-инструменты разработчика в вашем браузере (обычно, right click > inspect element поможет). Как правило, это не изменится, если вы не измените имена полей, но они также могут быть перезаписаны, если хотите. Просто создайте актуальную форму (или модель).

Всего наилучшего!