Question

我正在尝试构建一个Django表单。我试图实现的javascript逻辑是，如果输入表单值不为空，则提交表单。但是，我不确定如何获取{{form.value}}的ID。

    <form id = "form1" action="." method="POST">{% csrf_token %}    

    <div class=".col1" style="float:left;vertical-align: middle;">          

        {{ form.region }}

        {{ form.operator }}
    </div>

    <div class="col-xs-2 style="vertical-align: middle;">
        {{ form.value }}
    </div>

    </form>


function SubmitForm1(){

if(document.getElementById( {{Form.Value}} ).value != ""){
    document.getElementById("form1").submit();
}

}

Answer 1

在上面放置的代码中，您应该知道方法.getElementById需要传递html标记属性。请注意div标签上的id="form-value"属性：

<div id="form-value" class="col-xs-2 style="vertical-align: middle;">
    {{ form.value }}
</div>

javascript getElementById("form-value")：

function SubmitForm1(){
  if(document.getElementById("form-value").value != ""){
      document.getElementById("form1").submit();
  }
}

您可以在此处 w3cschools.com: HTML DOM getElementById() Method

查看

Answer 2

问题的根源在于，您正在混淆django模板中的代码，该模板在服务器一侧处理，使用您在javascript中执行的代码，该代码在< strong>客户端（浏览器）方面。服务器端存在的变量名在浏览器中的存在方式不同。在javascript中，您只能使用模板已呈现到发送到浏览器的HTML输出中的元素。

对于django表单，您的表单字段通常会使用ID id_ + 字段名称进行呈现。所以：

document.getElementById("id_region").value
document.getElementById("id_operator").value
document.getElementById("id_value").value

..等，将为您提供表单字段的值。

如果在视图中对Form构造函数使用prefix=参数，例如：

myform = MyFormClass(prefix='form1')

然后，前缀（form1），后跟短划线-，将被添加到该表单中所有字段的字段名称前面：

 document.getElementById("id_form1-value").value

如果您不确定表单中字段的名称或ID，则可以随时查看来源＆＃39;或者＆＃39;检查元素＆＃39;在浏览器中查看html文档中的内容。

Answer 3

使用onsubmit事件，如果返回false，则提交将取消

实施例： JS：

function validateForm() {
   var x = document.forms["form1"]["region"].value;
   if (x == "") {
    alert("region must be filled out");
    return false;
   }
}

HTML：

<form id = "form1" action="." method="POST" onsubmit="return validateForm()">

详情请见JavaScript Form Validation

如何使用javascript验证表单？

3 个答案: