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

Answer 1

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());
});