django 表单和 javascript答案

【问题标题】：django forms and javascriptdjango 表单和 javascript
【发布时间】：2018-08-17 11:28:32
【问题描述】：

我想在我的 Django ModelForm 中包含一个简单的 Javascript 函数，以通过将价格和数量相乘来自动计算总值，但我无法完成。下面是我的 django 代码和带有 JS 函数的 HTML 代码：

class TransactionForm(forms.ModelForm):
class Meta:
    model = Transaction
    fields = ['Date', 'Fruits', 'Deal', 'Price', 'Quantity', 'Gross', 'Area']
    widgets = {
        'Date': DateInput(),
        'Price': forms.TextInput(attrs={"id": "price", "onchange": "calculate_gross();"}),
        'Quantity': forms.TextInput(attrs={"id": "qty", "onchange": "calculate_gross();", }),
        'Gross': forms.TextInput(attrs={"id": "gross", "disabled":"true"}),
    }

<script>
  function success() {
    alert('Transaction added successfully');
  }
</script>

<script>
  function calculate_gross() {
    var price = parseFloat(document.getElementById('price').value);
    var qty = parseFloat(document.getElementById('qty').value);
    var gross = price*qty;
    document.getElementById('gross').value = gross;
  }
</script>

<h1>Enter Transaction Below</h1>

<form method="post">
  {% csrf_token %}
  {{form.as_p}}
  <input type="submit" name="Submit" onclick="success();">
</form>

任何支持将不胜感激。谢谢。

【问题讨论】：

标签： javascript django django-forms

【解决方案1】：

我成功了。谢谢你。需要从小部件中包含的 js 函数末尾删除半列。修改后的代码是：

widgets = {
    'Date': DateInput(),
    'Price': forms.TextInput(attrs={"id": "price", "onchange": "calculate_gross()"}),
    'Quantity': forms.TextInput(attrs={"id": "qty", "onchange": "calculate_gross()", }),
    'Gross': forms.TextInput(attrs={"id": "gross", "disabled":"true"}),
}

【讨论】：