jQuery / javascript cannot reset a form [duplicate]

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
– PhilVarg, Commented Jun 16, 2015 at 23:58
Works here jsfiddle.net/jvbqt8yv. Where's the rest of your code? — Jasen
– Jasen, Commented Jun 16, 2015 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
– Hanxue, Commented Jun 17, 2015 at 1:58

PeterKA · Accepted Answer · 2015-06-17 00:44:43Z

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, 2015 at 0:44

answered Jun 17, 2015 at 0:01

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hanxue Over a year ago

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

PeterKA Over a year ago

@hanxue you're right. The only other question with the same error did not seem to have any good answer: stackoverflow.com/questions/16780005/…. I've voted to reopen the question.

PeterKA Over a year ago

Just to clarify, the issue is with the name attribute, not the id attribute?

Hanxue Over a year ago

I set both name and id to reset initially. Changed both to reset_button to solve the problem.

Max Starkenburg Over a year ago

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)?

Scheda · Accepted Answer · 2015-06-17 00:04:29Z

2

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();
});

answered Jun 17, 2015 at 0:04

Scheda

5265 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery / javascript cannot reset a form [duplicate]

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related