preview form before submit is a common idea. idea of making such a plugin comes in my mind when i was working on a cake project and client ask me to do it.developer needs such a plugin most of the time and don’t like to write the same code in php js or jquery again and again.
What is it ?
previewForm is a tool for displaying form content before it goes to the server for processing.This plugin provides users to confirm the data before they are going to sumit it.
It was built using the jQuery library. Licensed under both MIT and GPL licenses
Feature
- Preview the value of textbox.
- Preview the value of selectbox.
- Preview the value of radiobox and checkbox.
- Preview password field if option selected.
Example
Example 1 With password preview.
Example 2 with password disable.
How to Use
1. First, make sure you are using valid DOCTYPE and correct form structure.
Your form must contain for tag of label with corresponding id of the field.
sample is
2. Include jQuery and previewForm JS files.
|
1 2 3 |
<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js”></script> <script type=“text/javascript” src=”previewForm / previewForm.js”></script> |
3. Add previewForm CSS file
4. Fire plugin using jQuery selector
|
1 2 3 4 5 |
<script type=“text/javascript”> $(document).ready(function() { $(‘#myform’).previewForm({ show_password : false }); }); </script> |
API & Options
| Key | Default value | Description |
| show_password | true | Whether you want to show the password field in preview |
| extratext | ‘Do You Want To submit’ | Extra text before confirmation buttons |
| yes | yes | Button Label for yes button |
| no | no | Button Label for no button |
| title | Please preview | Title of preview dialog |