Summary of form in a
with jQuery

Question

I have two input boxes and two select boxes and would like to display a summary of data selected and entered in real time prior to submitting the form. jQuery seems the way to go, but how!

<form id="form1" name="form1" method="post" action="">
<select name="Select1" id="Select1">
  <option value="Item 1">Item 1</option>
  <option value="Item 2">Item 2</option>
  <option value="Item 3">Item 3</option>
</select>
<br />
<select name="OtherItem" id="OtherItem">
  <option value="OtherItem 1">OtherItem 1</option>
  <option value="OtherItem 2">OtherItem 2 </option>
  <option value="OtherItem  3">OtherItem 3</option>
</select>
<input type="text" name="textfield1" id="textfield1" />
<input type="text" name="textfield2" id="textfield2" />
</form><div id="FormSummary"></div>

Many thanks

Do you want to display the value (attribute) or the text (content) of the selected options? — Bergi, Nov 29 '11 at 16:22
Check this question: http://stackoverflow.com/questions/1002211/collect-all-the-items-in-a-form-in-jquery — Yuriy Rozhovetskiy, Nov 29 '11 at 16:23

score 2 · Accepted Answer · answered Nov 29 '11 at 16:23

I would add an HTML markup for your summary so:

<div id="FormSummary">
     <p>Select 1 is: <span id="summarySelect1"></span></p>
     <p>Select 2 is: <span id="summarySelect2"></span></p>
     <p>Textfield 1 is: <span id="summaryTextField1"></span></p>
     <p>Textfield 2 is: <span id="summaryTextField2"></span></p>
</div>

then ur jquery:

$('#Select1').change(function(){
     $('#summarySelect1').text($(this).val());
});

$('#Select2').change(function(){
     $('#summarySelect2').text($(this).val());
});

$('#textfield1').keypress(function(){
     $('#summaryTextField1').text($(this).val());
});

$('#textfield2').keypress(function(){
     $('#summaryTextField2').text($(this).val());
});

score 1 · Answer 2 · answered Nov 29 '11 at 16:49

The best I could come up with is the following, using on():

$('input, select, textarea')
    .on('change',
        function(e){
            var inputs = $('input:text').map(
                function(){
                    return $(this).val();
                        }).get().join(', ');
            var selects = $('select option:selected').map(
                function(){
                    return $(this).text();
                });
            var textareas = $('textarea').map(
                function(t){
                    return $(this).val();
                }).get().join();
            $('#FormSummary')
                .html('<p>Inputs: ' + inputs + '.</p><p>Selects: ' + selects + '.</p><p>Textareas: ' + textareas + '</p>');
        });

JS Fiddle demo.

References:

score 0 · Answer 3 · answered Nov 29 '11 at 16:21

0

$('select').each(function() {
    $('#FormSummary').append('<div>' + $(this).val() + '</div>');
});

$('input').each(function() {
    $('#FormSummary').append('<div>' + $(this).val() + '</div>');
});

answered Nov 29 '11 at 16:21

Viruzzo

3,025
13
13

i think you could get away with combining that selector - i.e $('input,select').each(function(){...}); – totallyNotLizards Nov 29 '11 at 16:32

score 0 · Answer 4 · answered Nov 29 '11 at 16:23

.change() is the method you're looking for. It listens to changes to

<input> elements, <textarea> boxes and <select> elements

So you can do something like this:

$('select, input').change(function(){
  // triggered each time a drop-down or input changes
  var preview = ''
  $('select, input').each(function(){
    // gets all of the user inputs, and add the input value to a string
    user_value = $(this).val()
    preview = preview + user_value
  })
  // displays the combined input to the user
  $('#preview').text(preview)
})

score 0 · Answer 5 · answered Nov 29 '11 at 16:29

Bind the summary function to any change events you want to. In the summary function read the selected values (.val()) and print it into your summary element (or better: its children, as Evan suggested). Example:

jQuery(function($) {
    var form = $('#form1').bind('input', function updateSummary() {
        var summary = "";
        form.find('select, input').val(function(v) {
            summary += " "+v;
            return v;
        });
    });
});

Summary of form in a with jQuery

5 Answers5

Summary of form in a
with jQuery