Clearing form input fields in Bootstrap?

Question

Does Bootstrap offer anything for clearing form input fields via a button?

Or do I need to roll my own through jquery?

From this post jQuery Validate resetForm() doesn't reset the onFocus validation, there seems to be a resetForm() method coming from jquery but I always get a object doesn't support method when I try to access that method.

You're getting the error message because `resetForm()` is only part of the jQuery Validate plugin, not a jQuery method. — Sparky, Jan 08 '15 at 16:40

score 12 · Accepted Answer · answered Jan 07 '15 at 18:46

12

You can use reset method (this is DOM element method, it is not jQuery object method), like this

$('form').get(0).reset() // or $('form')[0].reset()

answered Jan 07 '15 at 18:46

Oleksandr T.

in my case it just resets the the fields to the initial value (the one when the form was loaded) but it doesn't clear them - what was asked – Alex P. Aug 18 '17 at 08:55
You're missing the #... '#form' – Koshera Sep 25 '18 at 20:32
No, # is for an id. This is perfectly fine ! – Luatic Dec 09 '18 at 13:56
Can we get an update on this using boostrap 5? – raba64577 Apr 20 '23 at 19:03

score 5 · Answer 2 · answered Jan 31 '19 at 19:17

5

Similar to other answers, if you want to reset the form (not necessarily clear it) you can use the following:

<button type="reset">

It's a little cleaner than embedding jQuery or javascript calls in the onclick...

answered Jan 31 '19 at 19:17

Mir

To clarify - "Reset" means to put it back to the state it was in on initial page load. So for example if you had loaded some form data from the database or something in the back end... "Reset" will put it back to that initial data, where "Clear" would just make every field empty. – Mir Mar 24 '22 at 16:02

score 2 · Answer 3 · answered Aug 18 '17 at 09:16

2

This worked for me (clearing the fields, not just resetting the form fields to inital value):

$(':input').val('');

but it seems to have side effects like submitting the form.

answered Aug 18 '17 at 09:16

Alex P.

3 Answers3