CODEWITHSUNDEEP
javascripthtml
YourPalNurav
YourPalNurav

Reputation: 1310

Webpage with a simple form reloads on form submission

I have a simple HTML form and am using JavaScript to display the entered value to the webpage, but everytime I hit submit the webpage reloads.

I have read the question at Webpage reloading on submitting form but that is jQuery and e.preventDefault(); isn't working in my case. How to stop the page from reloading?

I have the following code:

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>

Upvotes: 2

Views: 48

Answers (1)

trincot
trincot

Reputation: 350147

Two things to do:

  1. Add return to the onsubmit code:

    <form onsubmit="return myFunction()">

  2. Add at the end of your myFunction function:

    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>

Upvotes: 3

Related Questions