Невозможно записать AJAX выходную переменную в html форме

Question

Мне нужно напечатать внутри тега span («оценка2») результат вычисления (на данный момент, просто простая сумма двух полей ввода «SHm2» и «STm2»). Я использую AJAX вызов для выполнения этой задачи. Кажется, он работает идеально до предупреждения, которое показывает правильный результат, но по некоторым причинам я не могу записать этот результат в форму html. Я искал вокруг и пробовал несколько вещей, но ни одна из них не работала. Например, я пытался использовать метод записи, но он не работал или что-то вроде $("#estimation2").html(estimation); или document.getElementById("estimation2").innerHTML = estimation;. Единственный способ, которым мне удалось его написать, - это использование window.onload, но это генерирует вычисление, когда страница загружает, и я не хочу этого. Я хочу, чтобы код AJAX срабатывал только при нажатии на мою кнопку. Кроме того, просто для информации, расчет сделан в моем представлении django, хотя я не думаю, что это уместно здесь, поскольку это выглядит, чтобы работать должным образом. Я действительно потерян здесь, не могли бы вы помочь?

Вот мой код html и скрипт AJAX:

<input type="text" id="SHm2" name="SHm2" maxlength="10" type="number" value="50">
<input type="text" id="STm2" name="STm2" maxlength="10" type="number" value="50">

<button id="estimation" name= "estimation" onclick="calculate()">Estimation</button>

<label>Result:</label>
<span id="estimation2"></span>

<script type="text/javascript">
    function calculate () {
      var SHm2 = $('#SHm2').val();
      var STm2 = $('#STm2').val();
      $.ajax({
              url: '/myApp/templates/homepage/',
              type: 'POST',
              data: {
                'SHm2':SHm2,
                'STm2':STm2,
                estimation: 'estimation',
              },
              success: function(estimation) {
              alert(estimation);
              document.getElementById("estimation2").innerHTML = estimation;
              }
      }); 
    }
</script>

Answer 1

Итак, вы хотите запустить JS после загрузки документа HTML, и, как указано в разделе комментариев, вам нужно добавить кнопку type="button" к estimation

HTML

<input type="text" id="SHm2" name="SHm2" maxlength="10" type="number" value="50">
<input type="text" id="STm2" name="STm2" maxlength="10" type="number" value="50">

<button id="estimation" name= "estimation" type="button" onclick="calculate()" >Estimation</button>

<label>Result:</label>
<span id="estimation2"></span>

JS

 $(document).ready(function() {
   function calculate() {
    var SHm2 = $("#SHm2").val();
    var STm2 = $("#STm2").val();
    $.ajax({
      url: "/myApp/templates/homepage/",
      type: "POST",
      data: {
        SHm2: SHm2,
        STm2: STm2,
        estimation: "estimation"
      },
      success: function(estimation) {
        console.log(estimation);
        document.getElementById("estimation2").innerHTML = estimation;
      }
    });
  }
});