Веб-страница с простой формой перезагружается при отправке формы

Question

У меня есть простая форма HTML, и я использую JavaScript для отображения введенного значения на веб-странице, но каждый раз, когда я нажимаю кнопку «Отправить», веб-страница перезагружается.

Я прочитал вопрос на Перезагрузка веб-страницы при отправкеform , но это jQuery и e.preventDefault(); не работает в моем случае.Как остановить перезагрузку страницы?

У меня есть следующий код:

function myFunction() {
  var pm1, sqrtInt, pm2, constInt;

  pm1 = document.getElementById("pm1").value;
  pm1 = document.getElementById("sqrtInt").value;
  pm1 = document.getElementById("pm2").value;
  pm1 = document.getElementById("constInt").value;

  document.getElementById("proof").innerHTML = 
      '<br>pm1 = ' + pm1 + 
      '<br>sqrtInt = ' + sqrtInt + 
      '<br>pm2 = ' + pm2 + 
      '<br>constInt = ' + constInt;
}

#proof {
  background: black;
  color: yellow;
  width: 100%;
  height: 20%;
}

<div>Form Trial</div>
<div>
  <form onsubmit="myFunction()">
    <div>
      <select class="uk-select" id="pm1">
        <option>Minus (-)</option>
        <option>Plus (+)</option>
      </select>
    </div>
    <div>
      <input class="uk-input" type="text" placeholder="Square Root" id='sqrtInt'>
    </div>
    <div>
      <select id="pm2">
        <option>Minus (-)</option>
        <option>Plus (+)</option>
      </select>
    </div>
    <div>
      <input type="text" placeholder="Constant" id='constInt'>
    </div>
    <div>
      <input type="submit" value='submit'>
    </div>
  </form>
</div><br><br>
<div id="proof"></div>

Answer 1

Две вещи, которые нужно сделать:

1. Добавить return к onsubmit коду:

   <form onsubmit="return myFunction()">
   

2. Добавить в концевашей myFunction функции:

   return false;
   

function myFunction() {
  var pm1, sqrtInt, pm2, constInt;

  pm1 = document.getElementById("pm1").value;
  pm1 = document.getElementById("sqrtInt").value;
  pm1 = document.getElementById("pm2").value;
  pm1 = document.getElementById("constInt").value;

  document.getElementById("proof").innerHTML = 
      '<br>pm1 = ' + pm1 + 
      '<br>sqrtInt = ' + sqrtInt + 
      '<br>pm2 = ' + pm2 + 
      '<br>constInt = ' + constInt;
  return false; // <---------
}

#proof {
  background: black;
  color: yellow;
  width: 100%;
  height: 20%;
}

<div>Form Trial</div>
<div>
  <form onsubmit="return myFunction()">
    <div>
      <select class="uk-select" id="pm1">
        <option>Minus (-)</option>
        <option>Plus (+)</option>
      </select>
    </div>
    <div>
      <input class="uk-input" type="text" placeholder="Square Root" id='sqrtInt'>
    </div>
    <div>
      <select id="pm2">
        <option>Minus (-)</option>
        <option>Plus (+)</option>
      </select>
    </div>
    <div>
      <input type="text" placeholder="Constant" id='constInt'>
    </div>
    <div>
      <input type="submit" value='submit'>
    </div>
  </form>
</div><br><br>
<div id="proof"></div>