Как перенести переменную Javascript в модальный

Question

Я нашел этот javascript для вычисления (при отправке формы) суммы всех полей ввода с class = "qt". Если сумма всех полей меньше 15, это показывает сообщение во всплывающем окне предупреждения javascript. Все идет нормально. Но мне не нравится стиль всплывающего окна с предупреждениями Javascript, и кажется, что его нельзя стилизовать. Поэтому вместо стандартного всплывающего окна с предупреждением Javascript я хочу показать сообщение в модальном диалоговом окне. Пока все хорошо, все же. Единственное, что я не могу понять, это как перенести значение переменной Javascript (sum) в модальное окно и показать его там.

Тег формы:

<form onsubmit="return calculateSum(this);" method="post" name="order" id="order" action="confirm.php">

Javascript (внешний файл: javascript.js):

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) && this.value.length!=0) {
sum += parseFloat(this.value);
}

});
if(sum<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?');
}
}

Модал (Bootstrap) для отображения (html):

<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">

<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<!-- Modal body -->
<div class="modal-body">
<!--HOW CAN I SHOW THE JAVASCRIPT VARIABLE (sum) HERE?-->
</div>

<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>

</div>
</div>
</div>

Answer 1

Вы можете вставить сообщение в ваш готовый обратный вызов:

$(document).ready(function() {
  $(".modal-body").html("Please order at least 15 boxes.\n\nYour current selection is " + sum + "."); 
  $("#myModal").modal("show"); 
});

Answer 2

Добавьте пустой тег <p> (или как хотите, чтобы он отображался в модальном режиме) в ваш модальный HTML и присвойте ему id, который вы будете использовать в Javascript. Затем вы замените innerHTML тега в скрипте на вашу переменную:

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) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
if(sum<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?');
}
document.getElementById('sum').innerHTML=sum;
}
} 
<!-- The Modal -->
<div class="modal fade" id="myModal">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <!-- Modal Header -->
         <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
         <!-- Modal body -->
         <div class="modal-body">
            <!--HOW CAN I SHOW THE JAVASCRIPT VARIABLE (sum) HERE?-->
            <p id="sum"></p>
         </div>
         <!-- Modal footer -->
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>