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 相关文章推荐
PHP5中GD库生成图形验证码(有汉字)
Jul 28 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
Jul 08 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
Jul 25 PHP
跟我学Laravel之路由
Oct 15 PHP
laravel 5 实现模板主题功能(续)
Mar 02 PHP
php操作memcache缓存方法分享
Jun 03 PHP
PHP判断手机是IOS还是Android
Dec 09 PHP
Zend Framework教程之配置文件application.ini解析
Mar 10 PHP
php远程下载类分享
Apr 13 PHP
php 使用curl模拟登录人人(校内)网的简单实例
Jun 06 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
May 13 PHP
thinkphp3.2同时连接两个数据库的简单方法
Aug 13 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
PHP的加密方式及原理
2012/06/14 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
使用python实现knn算法
2017/12/20 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
python样条插值的实现代码
2018/12/17 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
浅谈python3中input输入的使用
2019/08/02 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
Python内置函数locals和globals对比
2020/04/28 Python
python获取整个网页源码的方法
2020/08/03 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
EJB的激活机制
2013/10/25 面试题
合作经营协议书
2014/04/17 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
python opencv旋转图片的使用方法
2021/06/04 Python
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android