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 相关文章推荐
Bootstrap的图片轮播示例代码
Aug 31 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
JS实现简单的表格增删
Jan 16 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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 验证图片生成函数
2009/05/21 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
Python正则表达式介绍
2012/08/06 Python
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
基于python的字节编译详解
2017/09/20 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
安全责任书范文
2014/03/12 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
爱牙日活动总结
2014/08/29 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
办理信用卡工作证明
2014/09/30 职场文书
收款委托书
2014/10/14 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python