title: How to bring a Javascript variable into a modal
body: <p>I found this javascript to calculate (on form submit) the sum of all input fields with class="qt". If the sum of all fields is less than 15 it shows a message in a javascript alert popup. So far so good.
  But I don't like the style of the Javascript alert popup and it seems it cannot be styled. Therefore, instead of the standard Javascript alert popup I want to show the  message in a styled modal dialog. So far so good, still.
  The only thing I can't figure out is how to bring the value of the Javascript variable (sum) into the modal window and show it there.</p>
  
  <p>The form tag:</p>
  
  <pre><code>&lt;form onsubmit="return calculateSum(this);" method="post" name="order" id="order" action="confirm.php"&gt;
  </code></pre>
  
  <p>The Javascript (external file: javascript.js):</p>
  
  <pre><code>function calculateSum() {
  
  var sum = 0;
  //iterate through each textboxes and add the values
  $(".qt").each(function() {
  
  //add only if the value is number
  if(!isNaN(this.value) &amp;&amp; this.value.length!=0) {
  sum += parseFloat(this.value);
  }
  
  });
  if(sum&lt;15) {
  //alert('Please order at least 15 boxes.\n\nYour current selection is ' + sum + '.');
  $(document).ready(function(){$("#myModal").modal("show"); });
  return false;
  }
  else {
  return true;
  //return confirm('Do you really want to submit the form?');
  }
  }
  </code></pre>
  
  <p>The (Bootstrap) modal to show (html):</p>
  
  <pre><code>&lt;!-- The Modal --&gt;
  &lt;div class="modal fade" id="myModal"&gt;
  &lt;div class="modal-dialog modal-dialog-centered"&gt;
  &lt;div class="modal-content"&gt;
  
  &lt;!-- Modal Header --&gt;
  &lt;div class="modal-header"&gt;
  &lt;h4 class="modal-title"&gt;Modal Heading&lt;/h4&gt;
  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;!-- Modal body --&gt;
  &lt;div class="modal-body"&gt;
  &lt;!--HOW CAN I SHOW THE JAVASCRIPT VARIABLE (sum) HERE?--&gt;
  &lt;/div&gt;
  
  &lt;!-- Modal footer --&gt;
  &lt;div class="modal-footer"&gt;
  &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>