0

so I'm having a bit of an issue here. I'm trying to do something that in theory should be very simple, but for some reason it's just not working.

I'm trying to get a Javascript function to reset a HTML form whenever a certain button is clicked.

Here is the form HTML code:

                <form id="main-form">
                    
                    <label for="amount">Amount</label>
                    <input type="number" min="0.00" step="0.01" id="amount" name="amount" placeholder="Enter the amount"><br>
                    <label for="from-currency">From</label>
                    <select id="from-currency" name="from-currency">
                        <option disabled selected value>Select a currency</option>
                        <option value="usd">American Dollar (USD)</option>
                        <option value="cad">Canadian Dollar (CAD)</option>
                        <option value="eur">Euro (EUR)</option>
                        <option value="gbp">Pound Sterling (GBP)</option>
                    </select><br>
                    <label for="to-currency">To</label>
                    <select id="to-currency" name="to-currency">
                        <option disabled selected value>Select a currency</option>
                        <option value="usd">American Dollar (USD)</option>
                        <option value="cad">Canadian Dollar (CAD)</option>
                        <option value="eur">Euro (EUR)</option>
                        <option value="gpb">Pound Sterling (GBP)</option>
                    </select><br>
                    <button class="convert-button" type="button" onclick="convert();">Convert</button>
                
                </form>

Here is the HTML code for the button:

<button class="clear-button" type="button" onclick="clear();">Reset</button>

And here is the simple Javascript function:

function clear() {
    document.getElementById("main-form").reset()
}

Is there something I'm missing here? Because honestly I can't see any error in my code...

G. Langlois
  • 75
  • 1
  • 8
  • I tried running your code and reset buttons works. Maybe the issue is that `onclick="clear();"` can't find `clear` function? – KiraLT Nov 04 '20 at 13:53
  • Can't the button just be of `type="reset"`? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button – Roy Nov 04 '20 at 13:54
  • @KiraLT I mean... I didn't provide the CSS code so the error might be there. Maybe it's because the clear button can't be clicked for some reason. I might have been looking too deep into this. – G. Langlois Nov 04 '20 at 13:56
  • @Roy It's still not working with type="reset", so it absolutely has to be the CSS. – G. Langlois Nov 04 '20 at 13:58

1 Answers1

0

Rename your clear() function to another name. For example :

function clearForm() {
    document.getElementById("main-form").reset()
}

And change the function called by the button :

<button class="clear-button" type="button" onclick="clearForm();">Reset</button>

I reproduced your problem and this solution fixes it.

Joris Lenclume
  • 49
  • 3