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

File Size: 10KB
Views Total: 3109
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Lightbox-Like Form Data Preview Box - previewForm

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

<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="Afghanistan">Afghanistan</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>

2. Include jQuery javascript library on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

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

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

4. Call the plugin

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

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