jquery Implementation Preview submitted form code sharing _jquery

Preview the form, check to confirm commit, or return to refill

Xml/html Code

Copy Code code as follows:

<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</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

Copy Code code as follows:

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

Previewform.js

Copy Code code as follows:

(function ($) {

$.fn.previewform = function (options) {
var form_settings = $.extend ({
Identifier: ' label ',
Show_password:true,
Extratext: ' Do your 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 () +$ (the ' # ' +$ (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 ' > ',
' ' <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

Copy Code code as follows:

#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)), to (11,11,11,0.1 (RGBA)) 11,11,11,0.6 repeat-x ( 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;