jquery实现预览提交的表单代码分享


Posted in Javascript onMay 21, 2014

预览表单,查看后确认提交或者返回重填

jquery实现预览提交的表单代码分享

XML/HTML Code

    <form class="mform" id="myform" method="POST" id="myform" action="">  
    <fieldset>  
    <legend>Registeration</legend>  
    <table cellspacing="0">  
    <tbody>  
    <tr>  
    <td><label for="u_name"> Username :</label></td>  
    <td><input type="text" name="uname" id="u_name">  
    <td>  
    </tr>  
    <tr>  
    <td><label for="u_pwd"> Password :</label></td>  
    <td><input type="password" name="uname" id="u_pwd"></td>  
    </tr>  
    <tr>  
    <td><label for="u_mail"> Email :</label></td>  
    <td><input type="email" name="uname" id="u_mail"></td>  
    </tr>  
    <tr>  
    <td><label for="u_country"> Country :</label></td>  
    <td><select name="Country" id="u_country">  
    <option value="" selected="selected">Select Country</option>  
    <option value="United States">United States</option>  
    <option value="United Kingdom">United Kingdom</option>  
    <option value="China">China</option>  
    </select></td>  
    </tr>  
    <tr>  
    <td><span> Gender :</span></td>  
    <td><input type="radio" name="gender" id="male" value="male">  
    <label for="male"> Male</label>  
    <input type="radio" name="gender" id="female"  value="female">  
    <label for="female"> Female </label></td>  
    </tr>  
    <tr>  
    <td><label for="subscribe"> Subscribe Us : </label></td>  
    <td><input type="checkbox" id="subscribe" name="subscribe" value="yes"></td>  
    </tr>  
    <tr>  
    <td></td>  
    <td><input type="submit" value="submit"></td>  
    </tr>  
    </tbody>  
    </table>  
    </fieldset>  
    </form>  
<script src="../../js/jquery-1.9.1.min.js"></script> 
<link rel="stylesheet" type="text/css" href="previewForm/previewForm.css" />
<script src="previewForm/previewForm.js"></script>

JavaScript Code

<script>  
$(document).ready(function() {  
    $('#myform').previewForm();  
});  
</script>

previewForm.js

(function($){ $.fn.previewForm = function(options){
  var form_settings = $.extend({
   identifier         : 'label',
   show_password        : true,
   extratext    : 'Do You Want To submit',
   yes  : 'yes',
   no  : 'no',
   title  : 'Please preview'   
  }, options);
   var dia_log; 
   var renderBUTTON;
   var this_frm;
   this_frm = $(this);
 $(this).submit(function (){

 if($('#pfomdata').length){
      return true;
     }
  
  dia_log="";
  var needle_cnfrm;
  if(this.id.length > 0){ needle_cnfrm = '#'+this.id+' label'; }
  else  { needle_cnfrm = '.'+$(this).attr('class')+' label'; }
 $(needle_cnfrm).each(function(i,val) { 
  if($(this).text().length >2){
 what_t= $('#'+$(this).attr('for')) ;
 switch(what_t.prop('type')){
 case 'password':
 if(!form_settings.show_password)
  dia_log +=$(this).text() + " your selected password<br/>";
 else
  dia_log +=$(this).text() +what_t.val()+"<br/>";
  break;
 case 'select-one':
 dia_log +=$(this).text()  +$('#'+$(this).attr('for')+' option:selected').text()+"<br/>";
  break;
 case 'radio':
 if( what_t.is(':checked'))
 dia_log +=$(this).text() +' '+what_t.val()+"<br/>";
  break;
 case 'checkbox':
 if( what_t.is(':checked'))
 dia_log +=$(this).text() +' '+what_t.val()+"<br/>";
  break;
 case 'undefined':
  break;
 default:
 dia_log +=$(this).text() +what_t.val()+"<br/>";
 break;
 }
 }
  });
  dia_log = dia_log.replace('undefined', '');
  
  renderBUTTON="";
  renderBUTTON += '<a href="javascript:void(0);" class="button form_yes">'+form_settings.yes+'<span></span></a>';
  renderBUTTON += '<a href="javascript:void(0);" class="button form_no">'+form_settings.no+'<span></span></a>';
  var renderTemplate = [
   '<div id="previewOverlay">',
   '<div id="previewBox">',
   '<h1>',form_settings.title,'</h1>',
   '<p>',dia_log,'</p>',
   '<p>',form_settings.extratext,'</p>',
   '<div id="previewButtons">',
   renderBUTTON,
   '</div></div></div>'
  ].join('');
  $(renderTemplate).hide().appendTo('body').fadeIn();
 $(".form_yes") .click(function(){ 
   var input = $("<input>").attr("type", "hidden").attr("id", "pfomdata").val("true");
    this_frm.append($(input));
    this_frm.submit();
   });
 $(".form_no") .click(function(){
    $('#previewOverlay').fadeOut(function(){
    $(this).remove();
     });
   });
 return false;
  });
 }
})(jQuery);

previewForm.css

#previewOverlay{
 width:100%;
 height:100%;
 position:fixed;
 top:0;
 left:0;
 background:url('ie.png');
 background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
 z-index:100000;
}
#previewBox{
 background:url('body_bg.jpg') repeat-x left bottom #e5e5e5;
 width:460px;
 position:fixed;
 left:50%;
 top:50%;
 margin:-130px 0 0 -230px;
 border: 1px solid rgba(33, 33, 33, 0.6);
 -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
 -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
 box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
}
#previewBox h1,
#previewBox p{
 font:26px/1 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
 background:url('header_bg.jpg') repeat-x left bottom #f5f5f5;
 padding: 18px 25px;
 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
 color:#666;
}
#previewBox h1{
 letter-spacing:0.3px;
 color:#888;
}
#previewBox p{
 background:none;
 font-size:16px;
 line-height:1.4;
 padding-top: 7px;
}
#previewButtons{
 padding:15px 0 25px;
 text-align:center;
}
#previewBox .button{
 display:inline-block;
 background:url('buttons.png') no-repeat;
 color:white;
 position:relative;
 height: 33px;
 font:17px/33px 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
 margin-right: 15px;
 padding: 0 35px 0 40px;
 text-decoration:none;
 border:none;
}
#previewBox .button:last-child{ margin-right:0;}
#previewBox .button span{
 position:absolute;
 top:0;
 right:-5px;
 background:url('buttons.png') no-repeat;
 width:5px;
 height:33px
}
#previewBox .form_yes{    background-position:left top;text-shadow:1px 1px 0 #5889a2;}
#previewBox .form_yes span{   background-position:-195px 0;}
#previewBox .form_yes:hover{  background-position:left bottom;}
#previewBox .form_yes:hover span{ background-position:-195px bottom;}
#previewBox .form_no{    background-position:-200px top;text-shadow:1px 1px 0 #707070;}
#previewBox .form_no span{   background-position:-395px 0;}
#previewBox .form_no:hover{  background-position:-200px bottom;}
#previewBox .form_no:hover span{ background-position:-395px bottom;}
Javascript 相关文章推荐
javascript时区函数介绍
Sep 14 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 #Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 #Javascript
Jquery的each里用return true或false代替break或continue
May 21 #Javascript
alert和confirm功能介绍
May 21 #Javascript
采用call方式实现js继承
May 20 #Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 #Javascript
js 采用delete实现继承示例代码
May 20 #Javascript
You might like
php反弹shell实现代码
2009/04/22 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python中的模块和包概念介绍
2015/04/13 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python语言描述随机梯度下降法
2018/01/04 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
django-filter和普通查询的例子
2019/08/12 Python
Python callable内置函数原理解析
2020/03/05 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
小学二年级学生评语
2014/04/21 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
奠基仪式致辞
2015/07/30 职场文书
初中政治教学反思
2016/02/23 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
员工试用期工作总结
2019/06/20 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
Python中的变量与常量
2021/11/11 Python
改造DE1103三步曲
2022/04/07 无线电
win10清理dns缓存
2022/04/19 数码科技
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android