jQuery / javascript cannot reset a form

Question

I have been trying to use jQuery to reset the form

$('#check_in_form')[0].reset();

Does not work. Using trigger() does not work too

$('#check_in_form').trigger("reset");

When I use these 2 methods, I get this error on my browser console

TypeError: $(...)[0].reset is not a function

Using plain Javascript does not work too.

getElementById("check_in_form").reset();

I finally have to resort to 'clicking' the Reset button

$('#reset').click();

What could be the problem here? jQuery is working on this page because I depend heavily on it for other portions of the page.

Can you make a fiddle? `trigger('reset')` should be the way to do it. The only way I'd see it not working is if `$('#check_in_form')` doesn't return anything. Using plain jquery doesn't work because reset is a jquery method — PhilVarg, Jun 16 '15 at 23:58
Works here http://jsfiddle.net/jvbqt8yv/. Where's the rest of your code? — Jasen, Jun 16 '15 at 23:59
Thanks @PhilVarg , user86745458 . Web page broken into many distinct files and too much work to sanitize content. PeterKA 's answer nailed it. Why people downvote instead of asking clarifying questions? I don't care for reputation points, but this will discourage new users. — Hanxue, Jun 17 '15 at 01:58

PeterKA · Accepted Answer · 2015-06-17T00:44:43.760

6

Quite likely you have:

<input type="reset" name="reset" id="reset"/>

The problem is with name="reset". In JS form.reset refers to this DOM element and therefore causes a name conflict with the reset() method.

Therefore form.reset() ----> TypeError: $(...)[0].reset is not a function means just that.

$('#reset').on('click', function() {
    $('form')[0].reset();
});

input[name=reset] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="radio" name="gender" value="A"/> A
  <input type="radio" name="gender" value="B"/> B
  <input type="radio" name="gender" value="C"/> C
  <input type="reset" name="reset"/>
  <button id="reset">Click To Reset</button>
</form>

edited Jun 17 '15 at 00:44

answered Jun 17 '15 at 00:01

PeterKA

24,158
5
26
48

Thanks @PeterKA . That was exactly the problem. I don't understand why you mark my question as duplicate. I have looked at _all_ questions using jQuery to reset HTML form in stackoverflow, MDN and jQuery docs before posting today. No one was silly enough to name button id="reset". This question may be useful for someone having the exact problem – Hanxue Jun 17 '15 at 01:54
@hanxue you're right. The only other question with the same error did not seem to have any good answer: http://stackoverflow.com/questions/16780005/0-reset-is-not-a-function-resetting-forms-in-jquery. I've voted to reopen the question. – PeterKA Jun 17 '15 at 02:26
Just to clarify, the issue is with the `name` attribute, not the `id` attribute? – PeterKA Jun 17 '15 at 02:28
I set both `name` and `id` to `reset` initially. Changed both to `reset_button` to solve the problem. – Hanxue Jun 17 '15 at 03:19
Thanks. As hanxue predicted, this exact issue was causing my problem and PeterKA's answer helped identify the problem. In my case, I'm not creating the DOM, I'm making a userscript, so I guess I'll either have to resort to using .click() on the input or using .setAttribute() to alter the name attribute (though probably not, since it might mess other stuff up)? – Max Starkenburg Mar 25 '16 at 02:27

score 2 · Answer 2 · answered Jun 17 '15 at 00:04

Here's working JS for you. Both vanilla js and JQuery.

https://jsfiddle.net/scheda/5e0h3wxc/

//vanilla JS
var button = document.querySelector('#form1-button');
button.addEventListener('click', function(e) {
    e.preventDefault(); 
    document.querySelector('#form1').reset();
});

//JQuery
$('#form2-button').click(function(e) {
    e.preventDefault();
    $('#form2')[0].reset();
});

jQuery / javascript cannot reset a form

2 Answers2