jquery實作預覽提交的表單程式碼分享_jquery

填寫表單，查看後確認提交或返回重填

XML/HTML 程式碼

複製程式碼程式碼如下：

   

 
   

; 
    註冊圖例> 
   ; 
    ; 
    使用者名稱： 
     
    ; 
    ; 
    ; 
  /td> 
     
    ; 
   ; td>電子郵件： 
     
    ; 
    ; 
    國家/地區： 
 "Country" id="u_country"> 
    選擇國家/地區選項> 
    美國選項> 
    美國選項> 
    英國選項> 
    中國; 
    選擇> 
    ;
    ; 
    ;性別： 
     
    男標籤> 
      > 女性 
    ; 
    ; 
    訂閱我們： 
     
    ; 
tr>; 
     
     
    > 
    ; 
   

; 
   

; 

複製程式碼程式碼如下：<script>  </script>

$(document).ready (function() { 

    $('#myform').previewForm(); 
}); 
腳本>

previewForm.js

複製代碼代碼如下：

(function($){

$.fn.previewForm = function(options){
  var form_settings = $.extend({
   identifier          額外文字    : '您要提交嗎' ,
   yes  : '是',
   no  : '否',
   title  : '請預覽』      var renderBUTTON ;
   var this_frm;
   this_frm = $(this);

 $(this).submit(function (){

 if($('#pfomdata').length){
      返回true;
     }
🎜>  if(this.id.length > 0){ Needle_cnfrm = '#' this.id ' label'; }
  else  {needle_cnfrm = '.' $(this).attr('class') '標籤' ; }

 $(needle_cnfrm).each(function(i,val) {
  if($(this).text().length > 2){

what_t= $ what_t= $ what_t= $ ('#' $(this).attr('for')) ;

 switch(what_t.prop('type')){
 case '密碼':
 if(!form_settings .show_password)
  dia_log =$(this).text() " 您選擇的密碼
";
 else
  dia_log =$(this).text() what_t.val() "
";
  break;
 case '選擇一個':
 dia_log =$(this).text()  $('#' $(this).attr('for ') ' option:selected').text() "
";
  break;
 case 'radio':
 if(what_t.is(':checked'))
 dia_log =$ (this).text() ' 'what_t.val() "
";
  break;
 case '複選框':
 if(what_t.is( ':checked') )
 dia_log =$(this).text() ' ' what_t.val() "
";
  break;
 case 'undefined':
 數值：
 dia_log =$(this).text() What_t.val() "
";
 break;

 }
}
  });
  dia_log = dia_log.replace('undefined', '');

  
  renderBUTTON="";
  renderBUTTON = ' ' form_settings.no '';

  var renderTemplate = [
   '

',
   '

',
   '

',
   '

',form_settings.title,'

',
   '

',dia_log,' p>',
  '

',dia_log,' p>',
   '

',form_settings.extratext,'

',
   '

',
   renderBUTTON,
'

'
  ].join('');

  $(renderTemplate).hide().appendTo('body'). fadeIn();

 $(".form_yes") .click(function(){
   var input = $("").attr("type", "hidden") .attr("id", "pfomdata").val("true") ;
    this_frm.append($(input));
    this_frm.submit();
   });
 $(".form_nofp. 🎜>    $('#previewOverlay').fadeOut(function(){
    $(this).remove();
    🎜>
  });
 }

})(jQuery);



previewForm.css





複製程式碼


程式碼如下：

#previewOverlay{
 寬度:100%;
 高度:100%;
 位置:固定;
 上:0;
 左:00; :url('ie.png');
 背景：-moz-線性漸變(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) 重複-x rgba(11) ,11,11,0.2);
 背景:-webkit-gradient(線性, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11, 11,11,0.6))) 重複-x rgba(11,11,11,0.2);
 z-index:100000;
}
#previewBox{

 背景:url('body_bg.jpg') 重複-x 左下#e5e5e5;
 寬度:460px;
 位置:固定;
 寬度:460px;
 位置:固定;
 > 頂部：50%；
 邊距：-130px 0 0 -230px;
 邊框：1px 實心rgba(33, 33, 33, 0.6);
 -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) 插圖;}

#previewBox h1,

#previewBox p{

 font:26px/1 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
 背景:url('Lucida Grande', sans-serif;
 背景:url('Lucida Grandeg .jpg') 重複x 左下#f5f5f5;
 內邊距: 18px 25px;
 文字陰影: 1px 1px 0 rgba(255, 255, 255, 0.6);}

#previewBox h1{
 字母間距：0.3px;

 顏色：#888;

}

#previewBox p{
 背景：無;

 字體大小：16px;

 行高：1.4;
 填入上方：7px;
}

#previewButtons{
 內邊距:15px 0 25px;

 文字對齊:居中;

}

#previewBox .button{
 顯示：內聯塊；

 背景：url('buttons.png') no-repeat;

 顏色：白色；
 位置：相對；
 高度：33px;

 字體：17px/33px 'Cuprum'、'Lucida Sans Unicode'、'Lucida Grande'、sans-serif;

 右距：15px; 文字裝飾：無;
 邊框：無;
}

#previewBox .button:last-child{ margin-right:0;}

#previewBox .button span{

 位置:絕對;

 頂部:0;

 右:-5px;

 背景:url('buttons.png') 無重複;
 背景:url('buttons.png') 無重複;
寬度：5px;
 高度：33px
}

#previewBox .form_yes{    背景位置：左上；文字陰影：1px 1px 0 #5889a2;}
#previewBox .form_yes span{    背景位置：-195px 0背景位置:左下;}

#previewBox .form_yes:懸停跨度{ 背景位置:-195px 底部;}

#previewBox .form_no{    背景位置：-200px top;text-shadow:1px 1px 0 #707070;}
#previewBox .form_no span{#  背景位置：Box 5p​​view. :hover{  背景位置:-200px 底部;}
#previewBox .form_no:懸停範圍{ 背景位置:-395px 底部;}