jQuery Plugin For Lightbox-Like Form Data Preview Box – previewForm

Original post: http://www.jqueryscript.net/form/jQuery-Plugin-For-Lightbox-Like-Form-Data-Preview-Box-previewForm.html

previewForm is a lightweight yet useful jQuery plugin that popups a modal box while clicking the submit button to preview the Form Data your users input.

How to use it:

1. Create a standard html form

01 <form class="mform" id="myform" method="POST" id="myform" action="">
02 <fieldset>
03 <legend>Registeration</legend>
04 <table cellspacing="0">
05 <tbody>
06 <tr>
07 <td><label for="u_name"> Username :</label></td>
08 <td><input type="text" name="uname" id="u_name">
09 <td>
10 </tr>
11 <tr>
12 <td><label for="u_pwd"> Password :</label></td>
13 <td><input type="password" name="uname" id="u_pwd"></td>
14 </tr>
15 <tr>
16 <td><label for="u_mail"> Email :</label></td>
17 <td><input type="email" name="uname" id="u_mail"></td>
18 </tr>
19 <tr>
20 <td><label for="u_country"> Country :</label></td>
21 <td><select name="Country" id="u_country">
22 <option value="" selected="selected">Select Country</option>
23 <option value="United States">United States</option>
24 <option value="United Kingdom">United Kingdom</option>
25 <option value="Afghanistan">Afghanistan</option>
26 </select></td>
27 </tr>
28 <tr>
29 <td><span> Gender :</span></td>
30 <td><input type="radio" name="gender" id="male" value="male">
31 <label for="male"> Male</label>
32 <input type="radio" name="gender" id="female"  value="female">
33 <label for="female"> Female </label></td>
34 </tr>
35 <tr>
36 <td><label for="subscribe"> Subscribe Us : </label></td>
37 <td><input type="checkbox" id="subscribe" name="subscribe" value="yes"></td>
38 </tr>
39 <tr>
40 <td></td>
41 <td><input type="submit" value="submit"></td>
42 </tr>
43 </tbody>
44 </table>
45 </fieldset>
46 </form>

2. Include jQuery javascript library on the page

3. Include jQuery previewForm on the page, after jQuery library

1 <link rel="stylesheet" type="text/css" href="previewForm/previewForm.css" />
2 <script src="previewForm/previewForm.js"></script>

4. Call the plugin

1 <script>
2 $(document).ready(function() {
3   $('#myform').previewForm();
4 });
5 </script>

This awesome jQuery plugin is developed by aniketan. For more Advanced Usages, please check the demo page or visit the official website.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s