时间戳

首页 > 解决方案 > 当值更改python时动态提交表单

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

问题描述

我是 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)

标签： pythonhtmldjangodynamic

解决方案

这将以最简单的方式实现您的要求。虽然我没有测试过，但逻辑就在那里。onChange您可以在 JS 中创建验证和提交函数，然后在使用属性更改输入字段时调用它。您只需要将属性添加到您的输入。您也可以在输入中添加事件侦听器或使用 jQuery取消 onchange 属性。由你决定。

视图.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();
    }
}

表格.py

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

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

推荐阅读