Как изменить значения формы при редактировании?

Question

Я новичок в Джанго.

Мне нужно изменить значение поля формы, если другое поле редактируется.

Итак, если я набрал val1 и val2 в веб-форме, val3 вычисляется автоматически перед нажатием кнопки сохранения.

Как и в MS Excel, если у меня есть ячейка C1 с функцией =A1+B1. Когда я изменяю значения A1 или B1, значение C1 автоматически изменяется.

class DealForm(forms.ModelForm):
class Meta:
    model = Deal
    fields = ['status', 'val1', 'val2', 'val3']
    widgets = {
        'status': forms.TextInput(attrs={'class': 'form-control'}),
        'val1': forms.NumberInput(attrs={'class': 'form-control'}),
        'val2': forms.NumberInput(attrs={'class': 'form-control'}),
        'val3': forms.NumberInput(attrs={'class': 'form-control'})
    }


class Deal(models.Model):
status = models.CharField(max_length=10, db_index=True)   
val1 = models.FloatField(null = True, blank=True)    
val2 = models.FloatField(null = True, blank=True)    
val3 = models.FloatField(null = True, blank=True)


class DealCreate(View):
def get(self, request):
    form = DealForm()
    return render(request, 'portfolio/deal_create.html', context={'form':form})

def post(self, request):
    bound_form = DealForm(request.POST)

    if bound_form.is_valid():
        new_deal = bound_form.save()
        return redirect(new_deal)
    return render(request, 'portfolio/deal_create.html', context={'form':bound_form})






<script>
function calcCounterVol(){
var val1 = document.getElementsByName('val1').value
var val2 = document.getElementsByName('val2').value
document.getElementByName('val3').value = parseInt(val1)+parseInt(val2)}
</script>


 <form>
<div class="form-row mx-1">
<div class="form-group border col-md-6">
  <div class="form-row border mt-1">
    <div class="form-group col-md-3">
      <label>Status</label>
      {{form.status}}
    </div>
    <div class="form-group col-md-3">
      <label>Val1</label>
      {{form.val1}}
    </div>
  <div class="form-group col-md-3">
      <label>Val2</label>
      {{form.val2}}
    </div>
  <div class="form-group col-md-3">
      <label>Val3</label>
      {{form.val3}}
    </div>
  </div>
</div>
</form>

Answer 1

Вы можете сделать это в JavaScript.Вы можете увидеть, каковы имена элементов, проверив страницу и вычислив так:

<script>
    function calculateVal3(){
    var val1 = document.getElementsByName('val1').value
    var val2 = document.getElementsByName('val2').value
    document.getElementByName("val3").value = parseInt(val1)+parseInt(val2)    
}
</script>

Сохраните его в своем шаблоне.

и вы можете передать событие change в атрибуте attrs, например:это

class DealForm(forms.ModelForm):
   class Meta:
    model = Deal
    fields = ['status', 'val1', 'val2', 'val3']
    widgets = {
        'status': forms.TextInput(attrs={'class': 'form-control'}),
        'val1': forms.NumberInput(attrs={'class': 'form-control'}),
        'val2': forms.NumberInput(attrs={'class': 'form-control','onchange':'calculateVal3()'}),
        'val3': forms.NumberInput(attrs={'class': 'form-control'})
    }