Preview form using jQuery


This tutorial shows how we can preview form using jQuery. Sometimes we need to preview form data before we submit the form for further processing. This gives us clear picture of what we have entered into the form and whether we need to rectify any data if we have entered incorrectly. This also saves us from extra server logic processing.


Knowledge of HTML, CSS and jQuery

Final Results

On running the preview-form.html you will see below output:

Preview form using jQuery

After entering form field value, you will see output as shown below:

Preview form using jQuery

Now we will see how to implement the above example.

Implementation of Example

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

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

<div id="container" class="container">            
	<div class="form">
		<h3>Preview form data using jQuery</h3>
			<legend>Form Fields</legend>
			<form method="post" action="" id="form">
					<label for="text">Text Field</label><br/>
					<input type="text" name="text" id="text"/>
					<label for="radio">Radio Field</label><br/>
					<input type="radio" name="radio" value="1">Yes</input>
					<input type="radio" name="radio" value="0">No</input>
					<label for="checkbox">Check Field</label><br/>
					<input type="checkbox" name="checkbox" value="1">Item 1</input>
					<input type="checkbox" name="checkbox" value="2">Item 2</input>
					<input type="checkbox" name="checkbox" value="3">Item 3</input>
					<input type="checkbox" name="checkbox" value="4">Item 4</input>
					<label for="optionval">Option Field</label><br/>
					<select name="optionval" id="optionval">
						<option value="">-- Select Option --</option>
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
					<label for="textarea">Textarea Field</label><br/>
					<textarea name="textarea" id="textarea" rows="8" cols="40"></textarea>
					<input type="submit" name="submit" id="submit" value="Submit"/>
					<input type="reset" name="reset" value="Reset"/>
	<div id="preview_data" title="Preview Form Data" style="display:none;"></div>

The above source code contains only few HTML tags for form input fields for user inputs. In real life example you may have more input fields  for processing your business data.

Step 3. Include below css inside <head/> tag. This below small source code just makes the form 600px wide and margin should be equal from all sides.

<style type="text/css">
	.form {
		margin: auto;

Step 4. Now include jQuery files inside <head/> tag. The below jquery and jquery ui APIs are required to handling the ui events to preview form using jquery.

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<link rel="stylesheet" href="jquery-ui.min.css">

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

We want to preview form data what user has input into the form fields when user clicks on a button before the data actually submitted to the server side.

It helps user to rectify or modify for any incorrect input in the form fields.

<script type= "text/javascript">
	$(document).ready( function() {
		$('#submit').on('click', function(e) {

	function preview(){            
		var text = $('input[name="text"]').val();
		var text_label = $('label[for="text"]').text();
		var text_data = '<p><strong>' + text_label + '</strong> : ' + text + '</p>';
		var radio = $('input[type="radio"]:checked').val();
		var radio_label = $('label[for="radio"]').text();
		var rdo = 'Undefined';
		if(radio == 0) {
			rdo = 'No';
		} else if(radio == 1) {
			rdo = 'Yes';
		var radio_data = '<p><strong>' + radio_label + '</strong> : ' + rdo + '</p>';
		//var checkbox = $('input[name="checkbox"]').val();
		var checkbox_label = $('label[for="checkbox"]').text();
		var chkArray = [];
		$('input[type="checkbox"]:checked').each(function() {
		var chkval = '';
		var chkSelected1 = false;
		var chkSelected2 = false;
		var chkSelected3 = false;
		$.each(chkArray, function( index, value ) {
			if(value == 1) {
				chkSelected1 = true;
				chkval += 'Item 1';
			} else if(value == 2) {
				if(chkSelected1) {
					chkval += ',';
				chkSelected2 = true;
				chkval += 'Item 2';
			} else if(value == 3) {
				if(chkSelected2) {
					chkval += ',';
				chkSelected3 = true;
				chkval += 'Item 3';
			} else if(value == 4) {
				if(chkSelected3) {
					chkval += ',';
				chkval += 'Item 4';
		var checkbox_data = '<p><strong>' + checkbox_label + '</strong> : ' + chkval + '</p>';
		var optionval = $('#optionval option:selected').val();
		var optionval_label = $('label[for="optionval"]').text();
		var optval = '';
		if(optionval == 1) {
			optval = 'Option 1';
		} else if(optionval == 2) {
			optval = 'Option 2';
		} else if(optionval == 3) {
			optval = 'Option 3';
		} else if(optionval == 4) {
			optval = 'Option 4';
		var optionval_data = '<p><strong>' + optionval_label + '</strong> : ' + optval + '</p>';
		var textarea = $('#textarea').val();
		var textarea_label = $('label[for="textarea"]').text();
		var textarea_data = '<p><strong>' + textarea_label + '</strong> : ' + textarea + '</p>';
		var data = text_data + radio_data + checkbox_data + optionval_data + textarea_data;
			resizable: false,
			modal: true,
			buttons: {
				'Submit': function() {
					//submit the form
				Cancel: function() {

Step 6. Now run the file preview-form.html and see the result as I have mentioned in Final Results section above.

Source Code

download source code

Thanks for reading.

Related posts

5 Thoughts to “Preview form using jQuery”

  1. Please Give Close form tag

    1. Check the close form tag. It’s already there before closing fieldset tag.

  2. Abraham Emmanuel

    I love php

  3. Raghu

    After previewing the form how to submit form to server….

    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 Comment