Django forms表单 select下拉框的传值实例

今儿继续做项目,学习了Django的forms生成前端的代码。

forms.py

class SignupForm(forms.Form):
  username = forms.CharField(validators=[user_unique_validate, username_rule_validate, ], required=True,
                max_length=30, min_length=5,
                error_messages={'required': '用户名不能为空', 'max_length': '用户名至少5位',
                        'min_length': '用户名最多30位'})
  password = forms.CharField(min_length=6, max_length=50, required=True,
                error_messages={'required': '密码不能为空',
                        'invalid': '密码格式错误',
                        'min_length': '密码不能少于6位',
                        'max_length': '密码最多50位'})
  classInfo = forms.ModelChoiceField(queryset=ClassInfo.objects.all(), required=True, empty_label=None, initial="预设值")#这里加的是班级名字
  email = forms.EmailField(validators=[email_unique_validate, ], required=True,
               error_messages={'required': '邮箱不能为空', 'invalid': '邮箱格式错误'})
  mobile = forms.CharField(validators=[mobile_validate, ], required=True,
               error_messages={'required': '手机号不能为空'})

然后views通过get方法获得表单的form

class SignupView(View):
  def get(self, request):
    obj = SignupForm()
    return render(request, 'user/signup.html', locals())

这里可以打印出来obj,可以看到表单类已经帮我们生成了前端代码

<tr><th><label for="id_username">Username:</label></th><td><input type="text" name="username" value="123123" minlength="5" maxlength="30" required id="id_username"></td></tr>
<tr><th><label for="id_password">Password:</label></th><td><input type="text" name="password" value="213123" minlength="6" maxlength="50" required id="id_password"></td></tr>
<tr><th><label for="id_classInfo">Classinfo:</label></th><td>
<select name="classInfo" id="id_classInfo">
 <option value="1" selected>15医药软件</option>
 <option value="2">15医药信息</option>
</select></td></tr>
<tr><th><label for="id_email">Email:</label></th><td><input type="email" name="email" value="123123231@qq.com" required id="id_email"></td></tr>
<tr><th><label for="id_mobile">Mobile:</label></th><td><input type="text" name="mobile" value="13328768123" required id="id_mobile"></td></tr>

其中select下拉框里的内容是从数据库中取出来的,利用ModelChoiceField,设置queryset来取出数据,这样实现动态存取select中的值。

而前端代码可以直接使用这个表单变量obj

<form method="post" action="{% url 'signup' %}">
  ...
  {% for field in obj %}
    {{ field }}
  {% end for %}
  ...
</form>

但是我这里没有设置label值,就没有直接这样偷懒,而是自己写了一个

<form method="post" action="{% url 'signup' %}>
....
   <tr>
     <td width="120" align="right" valign="top">用户名(学号)</td>
     <td width="auto" align="left"><input type="text" name="username" class="sls">        </td>
   </tr>
   <tr>
     <td width="120" align="right">密码</td>
     <td width="auto" align="left"><input type="password" name="password" class="sls"></td>
   </tr>
   <tr>
     <td width="120" align="right" valign="top">电子邮件</td>
     <td width="auto" align="left"><input type="text" name="email" class="sls"></td>
   </tr>
   <tr>
     <td width="120" align="right">班级</td>
     <td width="auto" align="left">
        {{ obj.classInfo }}
     </td>
   </tr>
   <tr>
     <td width="120" align="right" valign="top">手机号</td>
     <td width="auto" align="left"><input type="text" class="sls" name="mobile"></td>
   </tr>
....

前期我一直在用select标签来写,然后传值到option里,但是我发现通过再用obj.classInfo取里面的值时出现空白值

就类似于原本数据库存着两个选项,然后前端显示-------;选项一;空白;选项二;空白。

经过一番查找,出现-----这个选项是因为没有设置初始值,然后设置了initial

出现两个变量就是因为粗心大意,obj.classInfo本身就是个select标签,里面就有两个选项。

之后就是post提交验证,然后就是存值render操作了

  def post(self, request):
    has_error = True
    obj = SignupForm(request.POST)
    #print(obj)
    if obj.is_valid():
      has_error = False
      username = obj.cleaned_data['username']
      password = obj.cleaned_data['password']
      class_name = obj.cleaned_data['classInfo']
      email = obj.cleaned_data['email']
      mobile = obj.cleaned_data['mobile']
  ......
 

以上这篇Django forms表单 select下拉框的传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Python中Django 后台自定义表单控件

    在 django 中我们可以在 admin.py 中添加 ModelAdmin,这样就能很方便地在后台进行增删改查的操作.然而,对应 Model 生成的表单,并不友好,我们希望能像前端开发一样做出各种类型的控件,这就得对其后台的表单进行自定义. 其实 django 已经为我们提供了一些可用的表单控件,比如:多选框.单选按钮等,下面就以单选按钮为例: # forms.py from django import forms from .models import MyModel class MyFo

  • django获取from表单multiple-select的value和id的方法

    如下所示: <select id="host_list" name="host_list" multiple> {% for op in host_list %} <option id="{{ op.nid }}">{{ op.hostname }}</option> {% endfor %} </select> 1.当需要获取选中的option的value时, 需设置为id="{{ op

  • Django forms表单 select下拉框的传值实例

    今儿继续做项目,学习了Django的forms生成前端的代码. forms.py class SignupForm(forms.Form): username = forms.CharField(validators=[user_unique_validate, username_rule_validate, ], required=True, max_length=30, min_length=5, error_messages={'required': '用户名不能为空', 'max_len

  • django表单实现下拉框的示例讲解

    方法一: queue = forms.ModelChoiceField(label=u'队列',queryset=Queue.objects.all()) 方法二: class ServerForm(forms.Form): queue = forms.ChoiceField(label=u'队列') def __init__(self,*args,**kwargs): super(ServerForm,self).__init__(*args,**kwargs) self.fields['qu

  • AngularJS动态生成select下拉框的方法实例

    一.select相关知识 <select> <option value="0">HTML</option> <option value="1">Java</option> <option value="2">Python</option> </select> 其中,value 是存储到数据库的值,在此处为0,1,2这些数值,label 为显示在页面的值

  • layui表单验证select下拉框实现验证的方法

    layui 的form表单里的select 一开始以为加上lay-verify="required"就可以验证不空了,可是反复试了几次都不能验证 代码如下: <div class="layui-form-item"> <label class="layui-form-label">所属工种:</label> <div class="layui-input-block"> <

  • 基于jQuery的select下拉框选择触发事件实例分析

    本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

  • JavaScript实现向select下拉框中添加和删除元素的方法

    本文实例讲述了JavaScript实现向select下拉框中添加和删除元素的方法.分享给大家供大家参考,具体如下: 1.说明 a. 利用append()方法向下拉框中添加元素 b. 利用remove()方法移除下拉框中最后一个元素 2.实例源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

  • JavaScript实现获取select下拉框中第一个值的方法

    本文实例讲述了JavaScript实现获取select下拉框中第一个值的方法.分享给大家供大家参考,具体如下: 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • 使用layui监听器监听select下拉框,事件绑定不成功的解决方法

    如下所示: 使用layui监听select所选的value 需要注意的是:form.on必须写在layui.use(){ }中 且使用layui动态添加option时,必须要进行渲染(form.render()),否则选项追加不上 这样做完之后如果还不能获取select所选的value,那就需要检查一下select所在的form表单有没有写class属性,如果没有写class属性,就监听不到select 如果在完成后台操作之后跳转页面时不显示样式了,就检查一下请求路径resultmapping后

  • Python之Django自动实现html代码(下拉框,数据选择)

    我就废话不多说了,还是直接看代码吧! #模板 class IndexForm(forms.Form): # 模板,用户提交的name和这里的变量名一定要是一致的.否则不能获取数据 user = forms.CharField(min_length=6, error_messages={'required': '用户名不能为空', 'min_length': '用户名长度不能小于6'}) email = forms.EmailField(error_messages={'required': '邮

  • JavaScript动态操作select下拉框

    相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中.因为之前牵扯到optgroup标签时遇到了问题,没查到太过详细的解决方案,自己动手操作记录一下. 首先就是咱们的老朋友"select"标签,因为需要js.jq两种操作,所以就定义两个select标签. HTML代码: <div style="width: 200px;height: 100px;margin: auto;margin-top: 100px;padding: 2

随机推荐