CODEWITHSUNDEEP
javascripthtmlbutton
Gunacelan M
Gunacelan M

Reputation: 317

Content in the text field is cleared on clicking button

function CalcVolume() {
  var radiusvalue = document.getElementById("radius").value
  if (radiusvalue) {
    if (isNaN(radiusvalue)) {
      alert("Provide a number")
      return;
    }

    volumevalue = 4 * 3.14 * radiusvalue * radiusvalue * radiusvalue
    document.getElementById("volume").value = volumevalue;

  } else {
    alert("Provide an input")
  }
}
form {
  border: 2px solid black;
  padding-left: 15px;
  height: 170px;
  width: 200px;
}
<form>
  <p>
    Radius<br>
    <input type="text" id="radius">
  </p>
  <p>
    Volume<br>
    <input type="text" id="volume">
  </p>
  <button onclick="CalcVolume()">Calculate</button>
</form>

In the above code segment,which is a small logic with UI to calc volume for a given radius, the text fields are auto cleared on clicking the button with text "Calculate".Can someone help me in understanding this?

Upvotes: 0

Views: 73

Answers (2)

Mamun
Mamun

Reputation: 68933

The default type of a button is submit which is causing the submission of the form. Change that to button:

<button type="button" onclick="CalcVolume()">Calculate</button>

Working Code: 

function CalcVolume() {
  var radiusvalue = document.getElementById("radius").value
  if (radiusvalue) {
    if (isNaN(radiusvalue)) {
      alert("Provide a number")
      return;
    }

    var volumevalue = 4 * 3.14 * radiusvalue * radiusvalue * radiusvalue
    document.getElementById("volume").value = volumevalue;

  } else {
    alert("Provide an input")
  }
}
form {
  border: 2px solid black;
  padding-left: 15px;
  height: 170px;
  width: 200px;
}
<form>
  <p>
    Radius<br>
    <input type="text" id="radius" />
  </p>
  <p>
    Volume<br>
    <input type="text" id="volume" />
  </p>
  <button type="button" onclick="CalcVolume()">Calculate</button>
</form>

Upvotes: 0

Asons
Asons

Reputation: 87191

The form gets submitted.

You can add onsubmit="return false;" to <form onsubmit="return false;">

Stack snippet

function CalcVolume() {
  var radiusvalue = document.getElementById("radius").value
  if (radiusvalue) {
    if (isNaN(radiusvalue)) {
      alert("Provide a number")
      return;
    }

    volumevalue = 4 * 3.14 * radiusvalue * radiusvalue * radiusvalue
    document.getElementById("volume").value = volumevalue;

  } else {
    alert("Provide an input")
  }
}
form {
  border: 2px solid black;
  padding-left: 15px;
  height: 170px;
  width: 200px;
}
<form onsubmit="return false;">
  <p>
    Radius<br>
    <input type="text" id="radius">
  </p>
  <p>
    Volume<br>
    <input type="text" id="volume">
  </p>
  <button onclick="CalcVolume()">Calculate</button>
</form>

Or replace the form element with a div

Stack snippet

function CalcVolume() {
  var radiusvalue = document.getElementById("radius").value
  if (radiusvalue) {
    if (isNaN(radiusvalue)) {
      alert("Provide a number")
      return;
    }

    volumevalue = 4 * 3.14 * radiusvalue * radiusvalue * radiusvalue
    document.getElementById("volume").value = volumevalue;

  } else {
    alert("Provide an input")
  }
}
.myform {
  border: 2px solid black;
  padding-left: 15px;
  height: 170px;
  width: 200px;
}
<div class="myform">
  <p>
    Radius<br>
    <input type="text" id="radius">
  </p>
  <p>
    Volume<br>
    <input type="text" id="volume">
  </p>
  <button onclick="CalcVolume()">Calculate</button>
</div>

Upvotes: 3

Related Questions