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, whether we need to rectify any data if we have entered incorrectly. This also saves us from extra server logic processing.

Prerequisites

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.

<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. Now 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="jquery-1.10.2.js"></script>
    <script type="text/javascript" src="jquery-ui-1.11.1.js"></script>
    <link rel="stylesheet" href="jquery-ui.css">

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.

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) {
                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.html and see the result.

Thanks for reading.

Tags:

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials | TwitterFacebook Google PlusLinkedin | Reddit

2 thoughts on “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 *