Django forms表单 select下拉框的传值

时间:2023-02-04 07:29:19

今儿继续做项目,学习了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下拉框的传值的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 表单 - 格式化下拉框

    jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...

  2. form表单传递下拉框的Value和Text值,不适用Jquery传递

    同时获取下拉框的Value和Text值的解决办法:添加一个<input type="text" >文本框,用户选中一项后就将该项的value值给他 然后接受页面获取该文 ...

  3. iview表单验证下拉框不通过问题

    iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...

  4. easyui form load 数据表单有下拉框

    (function () { $('#text1').combobox({ url: 'http://localhost:5463/test/getComboJson' }) $('#text2'). ...

  5. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  6. jquery操作select下拉框的多种方法&lpar;选中&comma;取值&comma;赋值等&rpar;

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

  7. 雷林鹏分享:jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

  8. select &&num;19979&semi;&&num;25289&semi;&&num;26694&semi; disabled &&num;21017&semi; Form &&num;33719&semi;&&num;21462&semi;&&num;19981&semi;&&num;21040&semi;&&num;20540&semi;

    select 下拉框 disabled 则 Form 获取不到值 有时候需要禁用 下拉框 , 但是表单又需要获取到 下拉框的值. 解决方案1: 使用文本框和隐藏域 来代替下拉框 disabled 解决 ...

  9. layui给select下拉框赋值

    转: layui给select下拉框赋值 layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function ...

随机推荐

  1. Apache虚拟主机配置

    在一个Apache服务器上可以配置多个虚拟主机,实现一个服务器提供多站点服务,其实就是访问同一个服务器上的不同目录.Apache虚拟主机配置有3中方法:基于IP配置.基于域名配置和基于端口配置,这里介 ...

  2. 4、总结:基于Oracle Logminer数据同步

    最近开发Oracle数据同步功能,做了些调研和验证,这个工作过去有段时间,怕时间长了忘记,故用博客共享出来.在这系列*写了三篇文章,第一篇是写LogMiner配置及使用,第二篇是测试了LogMine ...

  3. linux内核SPI总线驱动分析(一)&lpar;转&rpar;

    linux内核SPI总线驱动分析(一)(转) 下面有两个大的模块: 一个是SPI总线驱动的分析            (研究了具体实现的过程) 另一个是SPI总线驱动的编写(不用研究具体的实现过程) ...

  4. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  5. ZUFEOJ 2395 天棋哥哥大战AlphGo

    Description3月15日,人机围棋大战巅峰对决在韩国首尔落下帷幕.五番棋的最后一局中,韩国著名棋手李世乭尽管与人工智能“AlphaGo”缠斗至官子阶段,但在双双进入读秒后最终还是投子认输,以总 ...

  6. C&num; GridView Edit &amp&semi; Delete&comma; 点击Delete的时候弹出确认框

    1. 使用GridView自带属性ShowEditButton和ShowDeleteButton,均设为True  <Columns> ... <asp:CommandField S ...

  7. jquery系列教程4-事件操作全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  8. 细说log4j

    可能做过java项目的基本上都是用过log4j,它是用来做java日志的.比如我们做一个项目分为很多的模块,那我们怎么想要知道它什么时候启动了,这时候我们可以使用log4j标记某某模块启动了. 努力的 ...

  9. 实验1:C&plus;&plus;简单程序设计(1)

    实验目的 1. 掌握c++中类c部分的编程知识: 数据类型,常量,变量,运算符,表达式,分支结构,循环结构 2. 掌握C++中数据输入和输出的基本方法 3. 熟练使用c++程序开发环境,掌握c++程序 ...

  10. spring BeanPostProcessor

    BeanPostProcessor spring使用BeanPostProcessor接口来处理生命周期的回调 BeanPostProcessor接口定义的两个方法,分别在bean的(实例化配置和初始 ...