Preview form using jQuery

This tutirial shows how we can preview form data using jQuery. Sometimes we need to preview form data before we submit the form. This gives us clear picture of what we have entered into the form, whether we need to rectify any data if we have entered incorrectly.


Knowledge of HTML, CSS and jQuery

Final Output

When the form is shown to end user

Preview form using jQuery

When we fill in the form and click on submit button

Preview form using jQuery

Now we will see how we can make this happen step by step

Step 1. Create a folder called preview anywhere in your computer disk space.

Step 2. Create an HTML file preview.html and write the below code inside <body></body> tag. Below code renders the form fields on browser.


Step 3. Now include below css inside <head/> tag.


Step 4. Now include jQuery files inside <head/> tag


Download above files from jquery-ui-1.11.1

Step 5. Write below code for previewing form data when we click on submit button. Put below code inside <head/> tag.


Step 6. Now run the file preview.html and see the result.

Thank you for reading. Please do not forget to leave a comment.

2 Replies to “Preview form using jQuery”

    1. on the previw popup you have two buttons Submit and Cancel. so handle event on those button what you want to do. handle submit event using Submit button and handle cancel using Cancel button.

Leave a Reply

Your email address will not be published. Required fields are marked *