Html Question posted in
Some basic documentation can be found here.

Html – How do I display the result using a Submit Button?

I want this form function in HTML to display the result after the Submit button is clicked. At this time, it executes the result when I enter numbers in those three input boxes (width, height, length), but I want to add a submit button, and when someone clicks on it, the result should be shown in a box.

<form oninput="x.value=parseFloat(((a.value)*parseFloat(b.value)*parseFloat(c.value))*1.3).toFixed(2)">
  <label for="a">Width (ft)</label>&nbsp
  <input type="number" id="a" value=""><br><br>
  <label for="b">Length (ft)</label>
  <input type="number" id="b" value=""><br><br>
  <label for="c">Height (ft)</label>
  <input type="number" id="c" value=""><br><br>
  <button>Submit</button>
  <output name="x" for="a b c"></output>
</form>
Tags:

4

Answers


  1. 0
    1. Change oninput to onsubmit
    2. Change <button> to <button type="submit">
    3. Add return false to cancel submit
    4. Change x.value to x.innerText (and put id="x" instead of name="x")
    <form onsubmit="x.innerText=parseFloat(((a.value)*parseFloat(b.value)*parseFloat(c.value))*1.3).toFixed(2); return false;">
  <label for="a">Width (ft)</label>&nbsp
  <input type="number" id="a" value=""><br><br>
  <label for="b">Length (ft)</label>
  <input type="number" id="b" value=""><br><br>
  <label for="c">Height (ft)</label>
  <input type="number" id="c" value=""><br><br>
  <label for="total"> <button type="submit"> Submit</button></label>
  <output id="x" for="a b c"> </output>
</form>
    Login or Signup to reply.
  2. 0

    First remove the oninput attribute from the form and add a submit button for calculating when the user clicks. On that submit button you can use the onclick method for calling javascript function. Inside that function, you can do your required calculations. Lastly, to show the result use the output element.

    Follow these steps:

     <form id="calculationForm">
  <label for="a">Width (ft)</label>&nbsp
  <input type="number" id="a" value=""><br><be>
  <label for="b">Length (ft)</label>
  <input type="number" id="b" value=""><br><be>
  <label for="c">Height (ft)</label>
  <input type="number" id="c" value=""><br><be>
  <button type="button" onclick="calculate()">Submit</button><br><be>
  <label for="total">Result:</label>
  <output id="result"></output>
 </form>
<script>
    function calculate() {
    var width = parseFloat(document.getElementById('a').value) || 0;
    var length = parseFloat(document.getElementById('b').value) || 0;
    var height = parseFloat(document.getElementById('c').value) || 0;

    var total = (width * length * height) * 1.3;
    document.getElementById('result').value = total.toFixed(2);
    }
 </script>
    Login or Signup to reply.
  3. 0

    You are likely looking for onsubmit, which will be triggered by the <button>...</button> in your form. Be careful though, submitting a form triggers a page refresh. You can cancel this by adding a <form onsubmit="...; return false" >...</form> at the end of your handler.

    However, putting your handler in the html isn’t a best practice. I would recommend to add a script tag and put your javascript in there:

    <form id="form">
    <label for="a">Width (ft)</label>&nbsp
    <input type="number" id="a" value=""><br><br>
    <label for="b">Length (ft)</label>
    <input type="number" id="b" value=""><br><br>
    <label for="c">Height (ft)</label>
    <input type="number" id="c" value=""><br><br>
    <button type="submit"> Submit</button>
</form>

<output id="output" for="a b c"> </output>

<script>
    const form = document.getElementById('form');
    const output = document.getElementById('output');

    form.addEventListener('submit', e => {
        // Prevent the page reload
        e.preventDefault();

        output.innerText = parseFloat(this.a.value) * parseFloat(this.b.value) * parseFloat(this.c.value) * 1.3;
    });
</script>
    Login or Signup to reply.
  4. 0

    Remove the oninput property from the form. To prevent the form from automatically submitting, add a button element with type="button". Create a JavaScript function to carry out the computation and display the result.

    Corrected Code:

    <form id="calcForm">
    <label for="a">Width (ft)</label>
    <input type="number" id="a"><br><br>
    <label for="b">Length (ft)</label>
    <input type="number" id="b"><br><br>
    <label for="c">Height (ft)</label>
    <input type="number" id="c"><br><br>
    <button type="button" onclick="calculateResult()">Submit</button>
</form>
<div id="result"></div>

<script>
    function calculateResult() {
        var width = parseFloat(document.getElementById('a').value) || 0;
        var length = parseFloat(document.getElementById('b').value) || 0;
        var height = parseFloat(document.getElementById('c').value) || 0;
        var result = (width * length * height * 1.3).toFixed(2);
        document.getElementById('result').innerText = 'Total: ' + result;
    }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search