Inserting the value in form's textfield onclick of a button using javascript

Question

 //This is a Js Calculator Code  
<!Doctype html>
<html>
<head>
  <title>Calculator</title>
  <script>
  function show(n) {
    document.calform.screen.value = document.calform.screen.value + n;
  }
  function operation(op) {
    document.calform.screen.value = document.calform.screen.value + op;
  }
  function equals() {
    document.calform.screen.value=eval(document.calform.screen.value);
  }
  </script>
</head>
<body>
  <center>
    <form name="calform" style="width:200px;" method="post">
      <fieldset border="1px">
        <legend> Calculator</legend>
        <input type="text" name="screen" /><br/><br/>
        <button onclick="show('7')">7</button>
        <button onclick="show('7')">8</button>
        <button onclick="show('7')">9</button>
        <button onclick="operation('+')">+</button><br/>
        <button onclick="show('7')">4</button>
        <button onclick="show('7')">5</button>
        <button onclick="show('7')">6</button>
        <button onclick="operation('-')">-</button><br/>
        <button onclick="show('7')">3</button>
        <button onclick="show('7')">2</button>
        <button onclick="show('7')">1</button>
        <button onclick="operation('*')">*</button><br/>
        <button onclick="operation('/')">/</button>
        <button onclick="operation('%')">%</button>
        <button onclick="">=</button>
        <button onclick="">C</button>
      </fieldset>
    </form>
  </center>
</body>
</html>

The problem with this code is that it insert the value in the form's textfield on onclick event of a button but the value doesn't hold in the textfield after click event........ Kindly leave your suggestions to resolve this issue..

I'm not sure what you mean by "the value doesn't hold in the textfield after click event". Can you help to clarify? — showdev, Dec 01 '15 at 19:46
Are you referring to the fact that the form submits after clicking any button? — showdev, Dec 01 '15 at 19:52
Possible duplicate of [How to prevent buttons from submitting forms](http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms). Also see [Can I make a — showdev, Dec 01 '15 at 20:05

score 0 · Accepted Answer · answered Dec 01 '15 at 19:57

The problem is exactly what @showdev said: the form submits on each button click. As soon as it submits, the field disappears. What you need to do is have type="button" in your html, so it would look like this: <button type="button" onclick="show('7')">7</button>

Inserting the value in form's textfield onclick of a button using javascript

1 Answers1