当值更改python时动态提交表单

Question

我是 html 和 Django 的新手，并试图让我的表单在用户更改输入时动态自动提交，基本上删除了“提交”按钮。

我的表单有 3 个输入（所有浮点数），它们将通过“some_function()”进行计算。但是为了节省用户时间，我希望它是动态的。因此，没有“提交”。

HTML：

    <div class="container">
          <h3>Calculator</h3>
          <form method="post" >
              {% csrf_token %}
              {{ form_c.as_p }}
              <button type="submit">Submit</button> # <- I would like to remove this
          </form>
    </div>

如果需要，我的视图如下：

 def post(self, request):
        form_c = CalculatorForm(request.POST, prefix='form_c')
        try:
            if form_c.is_valid():
                post = form_c.cleaned_data
                val1 = float(post.get('val1'))
                val2 = float(post.get('val2'))
                val3 = float(post.get('val3'))
                numbers = some_function(val1, val2, val3)

        except:
            pass

        args = {
            'form_c': form_c, 'form_cols': numbers,
        }
        return render(request, self.template, args)

（编辑）表格：

class CalculatorForm(forms.Form):
    val1 = forms.DecimalField(decimal_places=2, min_value=0.0, required=False)
    val2 = forms.DecimalField(decimal_places=2, min_value=0.0, required=False)
    val3 = forms.DecimalField(decimal_places=2, min_value=0.0, required=False)

Answer 1

这将以最简单的方式实现您的要求。虽然我没有测试过，但逻辑就在那里。您可以在 JS 中创建验证和提交函数，然后在使用 onChange 属性更改输入字段时调用它。 You just need to add the attribute to your inputs。您也可以只使用add event listeners to your inputs 或use jQuery 来取消 onchange 属性。这取决于你。

view.py

def post(self, request):
        form_c = CalculatorForm(request.POST, prefix='form_c')
        try:
            if form_c.is_valid():
                post = form_c.cleaned_data
                val1 = float(post.get('val1'))
                val2 = float(post.get('val2'))
                val3 = float(post.get('val3'))
                numbers = some_function(val1, val2, val3)

        except:
            pass

        args = {
            'form_c': form_c, 'form_cols': numbers,
        }
        return render(request, self.template, args)

HTML

<div class="container">
      <h3>Calculator</h3>
      <form method="post" id="myform" name="myform">
          {% csrf_token %}
          {{ form_c.as_p }}
      </form>
</div>

JavaScript

function validate_then_submit() {
    var valid = false;
    //validate form here
    if (valid == true) {
        document.forms['myform'].submit();
    }
}

forms.py

class fooForm(forms.Form):
    char_field = forms.CharField(widget=forms.TextInput(attrs={'onChange':'validate_then_submit()'}))

但是，我认为这些都不是好的设计。如果表单在数据“有效”后立即提交，如果出现拼写错误怎么办？它会从用户手中夺走控制权，并以意想不到的方式行事。