title: Display summary form through Modal
body: <p>Need to create food ordering system. 
  I'm quite stuck, where I would like to summarized the user's choice in <strong>modal</strong> form before storing in my database. It is said that modal is recommended inorder not to restart all over again using other page.</p>
  
  <p>Its in wizard template where clicking <strong>NEXT</strong> $('.buttonNext').addClass('btn btn-success');, it works fine and the choices doesn't reset if I go back to the first step:</p>
  
  <p>Here's what I've got so far.
  HTML:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;form role="form" id="showchoices" name="showchoices" method="post" onsubmit="return entry_check()" action="/user/ps/add/"&gt;
  
       &lt;div id="step-11"&gt;&lt;fieldset&gt;
      &lt;input type="radio" id="food1" name="burger" value="bigburger"/&gt; BB
      &lt;input type="radio" id="food2" name="burger" value="reg_burger"/&gt; RB &lt;/fieldset&gt; &lt;/div&gt;
  
      &lt;div id="step-22"&gt; &lt;fieldset&gt;
      &lt;input type="radio" id="drink1" name="drink" value="coca-cola"/&gt; CC
      &lt;input type="radio" id="drink2" name="drink" value="juice"/&gt; J &lt;/fieldset&gt; &lt;/div&gt;
  
      &lt;div id="step-33"&gt;&lt;input type="text" id="other_food" name="other"/&gt; &lt;/div&gt;
   &lt;/form&gt;
  
  &lt;input type="button" name="btn" value="Review" id="review" data-toggle="modal" data-target="#con_rev" class="btn btn-primary" /&gt;
  
  &lt;!--  pop out modal  --&gt;
  &lt;div class="modal fade" id="con_rev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;Confirm Order&lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;p&gt; Your Burger: &lt;span id="burger_type"&gt;&lt;/span&gt; &lt;/p&gt;
                  &lt;p&gt; Your Drinks: &lt;span id="drink_type"&gt;&lt;/span&gt; &lt;/p&gt;
                  &lt;p&gt; Others: &lt;span id="otherfood"&gt; &lt;/span&gt;&lt;/p&gt;&lt;/div&gt;
              &lt;div class="modal-footer"&gt;
               &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt; &lt;a href="" id="submit" class="btn btn-success success"&gt;Submit&lt;/a&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is my JS, which in same file HTML:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('#review').click(function () {
          $('#burger_type').html($('#burger').val());
          $('#drink_type').html($('#drink').val());
          $('#otherfood').html($('#other_food').val());
      }); &lt;/script&gt;
  </code></pre>
  
  <p>So only my "other_food" does displays what text you've input, others won't.  I don't know how to check in radio mode.</p>
  
  <p>Thank you in advance, I'm no expert in JS or javascript.</p>