Jquery implements preview and submission of form code sharing

Preview The form. Check the form and confirm the submission or return to refill.

XML/HTML Code

Copy codeThe Code is 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"> 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 codeThe Code is as follows:
<Script>
$ (Document). ready (function (){
$ ('# Myform'). previewForm ();
});
</Script>

PreviewForm. js

Copy codeThe Code is as follows:
(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 (''));

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> </a> ';
RenderBUTTON + = '<a href = "javascript: void (0 ); "class =" button form_no "> '+ form_settings.no +' <span> </a> ';

Var renderTemplate = [
'<Div id = "previewOverlay"> ',
'<Div id = "previewBox"> ',
'<H1>', form_settings.title, ''<P>', dia_log, '</p> ',
'<P>', form_settings.extratext, '</p> ',
'<Div id = "previewButtons"> ',
RenderBUTTON,
'</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 codeThe Code is 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 (11,11, 11, 0.1), to (rgba (11,11, 11, 0.6 ))) repeat-x rgba (0.2, 11 );
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 ;}