Calculating two fields in a form using JavaScript with a submit button and reset button

Question

Here the code that I made and not working looking to see how I would get my sum into the result field, Also looking how to make a reset button to clear all the text from the fields.

JSBin.

<html>

<head>
    <script>
        function addition() {
            var x = +document.getElementById('num1').value;
            var y = +document.getElementById('num2').value;
            document.getElementById('result').value = x + y;
            document.result.submit()
        }

        function reset() {}
    </script>
</head>

<body>
    <header>
        <h1>Calculator Using Forms &amp; JavaScript</h1>
    </header>

    <form>
        Number 1:
        <input type="number" id="num1" value="0" autofocus>
        <br> Number 2:
        <input type="number" id="num2" value="0">
        <br> Result:
        <input type="text" id="result" value="0" readonly>
        <br>
    </form>

    <input type="button" onclick="addition()" value="addition">
</body>

</html>

To submit form use .submit() on form and to reset use .reset() Demo — Tushar
– Tushar, Commented Apr 4, 2016 at 1:14

Niels Heisterkamp · Accepted Answer · 2016-04-04 01:23:57Z

1

Why do you want to submit the form?

You can use document.forms. to access the form.

Try this:

<html>

<head>
    <script>
        function addition() {
            var x = +document.getElementById('num1').value;
            var y = +document.getElementById('num2').value;
            document.getElementById('result').value = x + y;
            document.forms.calculator.submit()
        }

        function reset() {
          document.forms.calculator.reset();
        }
    </script>
</head>

<body>
    <header>
        <h1>Calculator Using Forms &amp; JavaScript</h1>
    </header>

    <form name="calculator">
        Number 1:
        <input type="number" id="num1" value="0" autofocus>
        <br> Number 2:
        <input type="number" id="num2" value="0">
        <br> Result:
        <input type="text" id="result" value="0" readonly>
        <br>
    </form>

    <input type="button" onclick="addition()" value="addition">
    <input type="button" onclick="reset()" value="reset">
</body>

</html>

answered Apr 4, 2016 at 1:23

Niels Heisterkamp

7354 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sverri M. Olsen Over a year ago

Put the reset into the form and then you don't have to use the click event. Also, the input fields lack the name attribute, so they are not going to be submitted.

yongsup · Accepted Answer · 2016-04-04 01:38:12Z

0

Do you want this one? jsbin

<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
    <script>
        function addition() {
            var x = +document.getElementById('num1').value;
            var y = +document.getElementById('num2').value;
            document.getElementById('result').value = x + y;
            //document.result.submit()

            //if you want use submit, use this code. if only see the result, don't use this
            //Submit is receive data, so you can't see a result.
            //document.getElementById('formId').submit();

            //jquery submit
            //$("form")[0].submit();
        }

        function reset() {
          //no jquery
          document.getElementById('formId').reset();
          //jquery
          //$("form")[0].reset();
        }
    </script>
</head>
<body>
    <header>
        <h1>Calculator Using Forms &amp; JavaScript</h1>
    </header>
    <form id="formId">
        Number 1:
        <input type="number" id="num1" value="0" autofocus>
        <br> Number 2:
        <input type="number" id="num2" value="0">
        <br> Result:
        <input type="text" id="result" value="0" readonly>
        <br>
    </form>

    <input type="button" onclick="addition()" value="addition">
    <input type="button" onclick="reset()" value="reset">
</body>

</html>

answered Apr 4, 2016 at 1:38

yongsup

1942 silver badges8 bronze badges

1 Comment

Mr_links Over a year ago

Thanks used this to enhance the original and make one with more calculations JSBin

RobG · Accepted Answer · 2016-04-04 01:43:13Z

Note that forms can be submitted without clicking the submit button, so if you want something to happen on submit, attach a listener to the form's submit handler. To reset a form only requires a reset button, no code.

Form controls must have a name to be successful and submit their value with the form, and you can pass a reference to the form using this from the listener so you don't need to use getElementById.

Implementing the above significantly reduces the amount of code required.

In the following, the submit listener returns false so prevents the form from submitting. If you want the form to submit, just remove the return statement from the in–line listener:

function addition(form) {
  form.result.value = +form.num1.value + +form.num2.value;
}

<form name="calculator" onsubmit="addition(this); return false;">
  Number 1:
  <input type="number" name="num1" value="0" autofocus>
  <br> Number 2:
  <input type="number" name="num2" value="0">
  <br> Result:
  <input type="text" name="result" value="0" readonly>
  <br>
  <input type="submit" value="Submit form">
  <input type="reset">
</form>

You may not want to submit the form at all, in that case you can make the submit button a plain button and call the function from there, but remember to stop the form submitting otherwise.

user1070111 · Accepted Answer · 2016-04-05 17:49:43Z

0

just give an id to the form and in your reset function, just do

document.getElementById("myForm").reset();

updates:

according to ROBG's comments, you don't need to bind a function to the button. you can simply add a

<input type="reset">

to reset all fields of the form, and if the button is out the form, you can do <input form="formID" type="reset"> to associate to specific form.

edited Apr 5, 2016 at 17:49

answered Apr 4, 2016 at 1:34

user1070111

592 silver badges7 bronze badges

4 Comments

RobG Over a year ago

There is no need for any code to reset the form, a reset button (input type reset) will do that.

user1070111 Over a year ago

that is brilliant, but what if I want to put the buttons out of the form?that way, the type reset button won't work.

RobG Over a year ago

You can associate a form control that is outside the form using the control's form attribute, so <input form="myForm" type="reset"> can be put anywhere and will reset the form. It works for any control you want to associate with the form, but be careful of accessibility constraints (if they apply).

user1070111 Over a year ago

that's awesome, I like it.

Collectives™ on Stack Overflow

Calculating two fields in a form using JavaScript with a submit button and reset button

4 Answers 4

1 Comment

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related