Search code examples
htmlforms

Can one reset button clear both the input and the result?

I have built a form in HTML and it is working as I like it, except the reset button.

I would like one reset button that clears all the user input and the verdict. This clears the input but leaves the verdit.

I have been looking all over online but can't find how to do this. Here is my code:

<form name="myform">

    <table border="5px solid" border-color= "black #444 #888 #ccc" width="50%" cellpadding="1" cellspacing="1" class="table-striped" style="margin-right: calc(25%); margin-left: 10px width: 80%;">
        <tbody>
            <tr>

            </tr>
            <tr>
                <td style="width: 92.7258%;">
                    <br>&nbsp; &nbsp;Enter the estimate &nbsp;&nbsp;&nbsp;$
                    <input maxlength="10" size="5" name="b" value="">&nbsp; &nbsp; &nbsp;
                    <br>&nbsp; &nbsp;The amount from the letter &nbsp;$
                    <input maxlength="10" size="5" name="c" value="">&nbsp; &nbsp; &nbsp;
                    <br>&nbsp; &nbsp;The number of months, enter 12 for a full year.&nbsp;
                    <input maxlength="2" size="5" name="d" value="">&nbsp; &nbsp; &nbsp;
                    <br>&nbsp; &nbsp;Enter the quote amount.&nbsp;$
                    <input maxlength="10" size="5" name="e" value="">&nbsp; &nbsp; &nbsp;
                <p></p>
                  &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <input onclick="perc1()" type="button" value="Calculate">&nbsp; &nbsp;
                    <input type="reset" value="Reset">
                    
                    <br>&nbsp; &nbsp; <div id="verdict">
                    <br> 
                </td>
            </tr>

        </tbody>
    </table>
</form>

The verdict is like a paragraph long and I couldn't figure out how to send something that long to another input. That's why the div id and the subsequent problem.

Thanks for your guidance! =D

Solution

  • Your <div> dedicated to verdict is not part of the form fields so it is not cleared by the reset button.

    You can add an onreset function to the form tag and define a JavaScript function to reset the form and verdict.

    <form name="myform" onreset="resetForm()">

    and function

    function resetForm() {
    // Clear input values
    document.myform.b.value = '';
    document.myform.c.value = '';
    document.myform.d.value = '';
    document.myform.e.value = '';
    
    // Clear verdict
    document.getElementById('verdict').innerHTML = '';
}