title: Display form input in Bootstrap MODAL
body: <p>I need to display the user input from the form into the MODAL. This MODAL will act as a confirmation box before submitting the form.  It should be like this:</p>
  
  <ol>
  <li>User fills the form.</li>
  <li>Form is validated to check required fields [<code>entry_check()</code>].</li>
  <li>After validation, modal window opens and display the user inputs for confirmation.</li>
  <li>After confirmation, the form is submitted.</li>
  </ol>
  
  <p><strong>Code</strong></p>
  
  <pre><code>&lt;form role="form" id="ps_entry" name="ps_entry" method="post" onsubmit="return entry_check()" action="/user/ps/add/"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;Type&lt;/td&gt;
              &lt;td&gt;:&lt;/td&gt;
              &lt;td&gt;
                  &lt;label&gt;
                      &lt;input type="radio" name="type" id="type" value="1" /&gt;Purchase&lt;/label&gt;
                  &lt;br /&gt;
                  &lt;label&gt;
                      &lt;input type="radio" name="type" id="type" value="2" /&gt;Sale&lt;/label&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Date&lt;/td&gt;
              &lt;td&gt;:&lt;/td&gt;
              &lt;td&gt;
                  &lt;input name="date" id="date" class="input" autocomplete="off" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Purchase Date&lt;/td&gt;
              &lt;td&gt;:&lt;/td&gt;
              &lt;td&gt;
                  &lt;input name="pdate" id="pdate" class="input" autocomplete="off" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Remarks&lt;/td&gt;
              &lt;td&gt;:&lt;/td&gt;
              &lt;td&gt;
                  &lt;textarea name="remarks" id="remarks" class="input" autocomplete="off"&gt;&lt;/textarea&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  &lt;/p&gt;
  &lt;div class="modal fade" id="confirm-submit" 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 Submit&lt;/div&gt;
              &lt;div class="modal-body"&gt;Are you sure you want to submit the following details?
                  &lt;!-- We display the details entered by the user here --&gt;
                  &lt;table class="table"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Type&lt;/th&gt;
                          &lt;td id="typ"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Date&lt;/th&gt;
                          &lt;td id="dat"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Payment Date&lt;/th&gt;
                          &lt;td id="pdat"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Remarks&lt;/th&gt;
                          &lt;td id="remark"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&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><strong>JS</strong></p>
  
  <pre><code>$('#submitBtn').click(function () {
      /* when the button in the form, display the entered values in the modal */
      $('#typ').html($('#type').val());
      $('#dat').html($('#date').val());
      $('#pdat').html($('#pdate').val());
      $('#remark').html($('#remarks').val());
  });
  
  $('#submit').click(function () {
      /* when the submit button in the modal is clicked, submit the form */
      alert('submitting');
      $('#ps_entry').submit();
  });
  </code></pre>
  
  <p>It works perfectly when i try it in JSFiddle
  <a href="http://jsfiddle.net/nvVBa/76/" rel="nofollow">http://jsfiddle.net/nvVBa/76/</a>. But when I try it in localhost, user input values are not displayed in the modal.</p>