Yii2.0 模态弹出框+ajax提交表单


Posted in PHP onMay 22, 2016

如题 我们使用模态弹出框+ajax提交表单 首先我们把index视图的create按钮添加data-toggle 和 data-target。

代码如下:

<?php 
echo Html::a('添加请假单', ['create'], ['class' => 'btn btn-success','data-toggle'=>'modal','data-target'=>'#ajax']) 
?>

在index视图添加如下代码 来显示模态弹出框:

<div class="modal bs-example-modal-lg" id="ajax">

 <div class="modal-dialog">
 
 <div class="modal-content width_reset" id="tmpl-modal-output-render"> </div>
 
 </div>

</div>

修改后的效果如下

Yii2.0 模态弹出框+ajax提交表单

然后我们修改控制器中的create方法,把render改为renderAjax即可

return $this->renderAjax('create', [
    'model' => $model,
   ]);

如果想添加表单验证我们需要修改views 里的 _form 添加上id

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data'],'id'=>'leave-form-self']) ?>
指向 你的models 在rules添加上验证规则

 public function rules()
 {
  return [
   [['t_leave_date', 't_days', 't_reason', 't_nickname','t_leave_enddate'], 'required'],
   [['t_leave_date', 't_leave_enddate'], 'safe'],
   [['t_days'], 'number'],
   [['t_reason'], 'string'],
   [['type', 'add_time', 'uid', 'update_time', 'status', 'is_shen'], 'integer'],
   [['t_pickup', 't_nickname', 't_pass'], 'string', 'max' => 20],
   [['t_img', 'reviewer_user', 'audit_user'], 'string', 'max' => 255]
  ];
 }

效果如下

Yii2.0 模态弹出框+ajax提交表单

这样就实现了ajax提交表单

PHP 相关文章推荐
PHP操作文件方法问答
Mar 16 PHP
防止用户利用PHP代码DOS造成用光网络带宽
Mar 01 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
Jun 29 PHP
phpQuery占用内存过多的处理方法
Nov 13 PHP
php中apc缓存使用示例
Dec 25 PHP
php实现数组筛选奇数和偶数示例
Apr 11 PHP
PHP日期函数date格式化UNIX时间的方法
Mar 19 PHP
PHP面向对象程序设计类的定义与用法简单示例
Dec 27 PHP
详解php中serialize()和unserialize()函数
Jul 08 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
Oct 02 PHP
laravel 解决paginate查询多个字段报错的问题
Oct 22 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
Feb 18 PHP
php文件上传后端处理小技巧
May 22 #PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
May 22 #PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
May 21 #PHP
制作个性化的WordPress登陆界面的实例教程
May 21 #PHP
详解WordPress中添加友情链接的方法
May 21 #PHP
PHP框架Laravel插件Pagination实现自定义分页
Apr 22 #PHP
屏蔽PHP默认设置中的Notice警告的方法
May 20 #PHP
You might like
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python生成二维码的实例详解
2017/10/29 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python在不同条件下的输入与输出
2020/02/13 Python
python中提高pip install速度
2020/02/14 Python
django orm模块中的 is_delete用法
2020/05/20 Python
Python如何读取、写入JSON数据
2020/07/28 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
出纳会计岗位职责
2014/03/12 职场文书
德育标兵事迹材料
2014/08/24 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
会议主持词开场白
2015/05/28 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
HTML+JS实现在线朗读器
2022/02/15 Javascript