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

前端技术 2023/09/06 JavaScript

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

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);

本文地址：https://www.stayed.cn/item/17539

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案