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

John
August 9, 2024
194 views
4 votes
4 Answers

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: html javascript

Answers

Change oninput to onsubmit
Change <button> to <button type="submit">
Add return false to cancel submit
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>

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>

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers