前端获取checkbox复选框的值 通过数组形式传递
html代码:
<form role="form" class="select_people">
<div style="display: inline-block; margin-left: 30px; margin-top: 0">
<label for="name">应用一组</label>
{% for peopel_1 in peopels_1 %}
<div class="checkbox">
<label><input type="checkbox" value={{ peopel_1.name }} name="people_name">{{ peopel_1.name }} </label>
</div>
{% endfor %}
</div>
<div style="display: inline-block; margin-left: 40px">
<label for="name">应用二组</label>
{% for peopel_2 in peopels_2 %}
<div class="checkbox">
<label><input type="checkbox"value={{ peopel_2.name }} name="people_name">{{ peopel_2.name }} </label>
</div>
{% endfor %}
</div>
<button type="submit" style="margin-left: 40px" id="sub_people" data-dismiss="modal"
class="btn btn-default">提交</button>
</form>
js代码:
1 获取已选中的名字并放到数组中
var name_list = [];
$("input[name='people_name']:checked").each(function(){
name_list.push($(this).val)
});
2 利用ajax向后台传递form表单数据
$(".select_people").submit(function(event){
event.preventDefault(); // 阻止默认表单的action功能
var name_list = [];
$("input[name='people_name']:checked").each(function(){
name_list.push($(this).val)
});
data = {'id': 1, 'names': name_list};
$.ajax({
url: "task_mgm/********",
type: "POST",
data: JSON.stringify(data),
contentType: "application/json", //发送到后台的数据格式
data_type: "json", // 接收后端返回的数据格式
success: function(resp){
if (resp.error == "OK"){ console.log('分享成功') }
else { console.log('分享失败') }
}
});
})
python后台代码:
@task_mgm.route('/taskinfo_share_people', methods=['POST', 'GET'])
@login_required
def taskinfo_share_people_fun():
datas = request.get_json()
task_id = datas.get('id')
sharePeopleList = datas.get('names')
print(sharePeopleList)
task = ShareTask()
if len(sharePeopleList) > 0:
task.taskId = task_id
sharePeopleList = list(set(sharePeopleList)) # 去重
sharePs = ','.join(sharePeopleList)
task.sharePeopleTo = sharePs
task.sharePeopleFrom = current_user.name
db.session.add(task)
db.session.commit()
return jsonify(error='OK', emsg="True")
else:
return jsonify(error='NO', emsg="False")
前端获取checkbox复选框的值 通过数组形式传递的更多相关文章
- Web版需求征集系统所得1,servlet中获取checkbox复选框的值
servlet中获取checkbox复选框的值 </tr> <tr> <td align="right">研究类型</td> < ...
- 获取checkbox复选框的值
<title>CheckBox</title> <script type = "text/javascript"> doGetVal: func ...
- php获取checkbox复选框的内容
php获取checkbox复选框的内容 由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...
- php怎么获取checkbox复选框的内容?
由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...
- js获取checkbox复选框获取选中的选项
js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...
- layui获取checkbox复选框值
获取layui表单复选框已选中的数据 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- jQuery获取input复选框的值
var ipResolveValue =[]; //定义一个空数组$("input[name='ipResolve']:checked").each(function(){ / ...
- 使用js获取复选框的值,并把数组传回后台处理,过程使用的是Ajax异步查询
这是界面代码: function shua(){ var id_array=new Array(); $('input[id="checkAll& ...
- php checkbox复选框值的获取与checkbox默认值输出方法
php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...
随机推荐
- Java开发笔记(七十三)常见的程序异常
一个程序开发出来之后,无论是用户还是程序员,都希望它稳定地运行,然而程序毕竟是人写的,人无完人哪能不犯点错误呢?就算事先考虑得天衣无缝,揣着一笔巨款跑去岛国买了栋抗震性能良好的海边别墅,谁料人算不如天 ...
- Android开发——EditText的属性使用
最近使用的EditText控件,有些属性不太清楚,做一下笔记 判断EditText中内容是否为空 EditText多行显示 android:inputType="textMultiLin ...
- Java小工具 根据文本批量修改文件名
功能 可以根据使用路径修改文件名,已经测试,可以成功运行 思路 先是读取到txt文本文件,之后使用String的spilt进行分割,每一行的格式为 旧名字 新名字,中间的空格可以使用|或者其他字符代替 ...
- SpringBoot项目部署到服务器上,tomcat不启动该项目
今天lz把项目重新传到服务器上后,重启tomcat遇到个问题,就是这个tomcat怎么都不启动这个项目,别的项目都没事,一番查找后发现问题所在. 我们先建个SpringBoot工程,重现一下问题: 写 ...
- Spring(二)继承jdbcDaoSupport的方式实现(增删改查)
一 首先创建数据库表和相应的字段,并创建约束 二 建立项目,导入jar包(ioc,aop,dao,数据库驱动,连接池)并且将applicationContext.xml文件放在src下 三 开启组件扫 ...
- Chrome下面查看placeholder的样式
在Chrome下面默认是看不到placeholder的样式的 我们可以通过在当前页面的开发者工具里面的settings 勾选下面这个选项,就可以看到了 下面是效果
- JAVA程序员学PHP
工作之余,趁着五一假期学习下PHP,都说PHP是世界上最美的语言,而且现在应用的有这么广泛,在短期时间内在编程的市场上打得火热,好奇心趋势我去学习一下,下面便是我学习PHP记录下来的过程,和大家分享一 ...
- #WEB安全基础 : HTML/CSS | 0x10实现交互_表单
先看看表单如何工作吧 请求 响应 简要工作流程: 浏览器加载页面 用户输入数据 用户提交表单 服务器响应 概念都清楚了,我们来写表单吧 只有一个html文件 这是显示 你可以向空白框框 ...
- windows蓝屏代码
原始链接 引用自 https://docs.microsoft.com/zh-cn/windows-hardware/drivers/debugger/bug-check-code-referenc ...
- embed 引入网上视频
<p>embed引入网上视频</p> <embed src='http://player.youku.com/player.php/sid/XMjgxODkyMTIxNg ...