Preview HTML Form Data using jQuery

Introduction

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

Prerequisites

Knowledge of HTML, CSS and jQuery 3.4.1 – 3.5.1, jQuery UI 1.12.1

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 you will see how to implement the above example.

Preview HTML Form Data using jQuery

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>
		<fieldset>
			<legend>Form Fields</legend>
			<form method="post" action="" id="form">
				<p>
					<label for="text">Text Field</label><br/>
					<input type="text" name="text" id="text"/>
				</p>
				<p>
					<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>
				</p>
				<p>
					<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>
				</p>
				<p>
					<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>
					</select>
				</p>
				<p>
					<label for="textarea">Textarea Field</label><br/>
					<textarea name="textarea" id="textarea" rows="8" cols="40"></textarea>
				</p>
				<p>
					<input type="submit" name="submit" id="submit" value="Submit"/>
					<input type="reset" name="reset" value="Reset"/>
				</p>
			<form>
		</fieldset>
	</div>
	<div id="preview_data" title="Preview Form Data" style="display:none;"></div>
</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 {
		width:600px;
		margin: auto;
	}
</style>

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="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Or

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

And

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">

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

You may 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) {
			e.preventDefault();
			preview();
		});
	});

	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() {
			chkArray.push($(this).val());
		});
		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;
		$('#preview_data').html('');
		$('#preview_data').append(data);
		$('#preview_data').dialog({
			resizable: false,
			//height:140,
			modal: true,
			buttons: {
				'Submit': function() {
					//submit the form
					$(this).dialog("close");
				},
				Cancel: function() {
					$(this).dialog("close");
				}
			}
		});
	}
</script>

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

That’s all about how to preview HTML form data using jQuery.

Source Code

Download

5 thoughts on “Preview HTML Form Data 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 *