Using Reset() function with a form returns "property of undefined"

Question

I am trying to use the Reset() function to reset my form, but I am getting an error as following:

Uncaught TypeError: Cannot read property 'reset' of undefined

While it was working without any problem !!

Here's my code (jQuery):

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

(HTML):

<form method="POST" action="https://petrocanada.dev/admin/coding/vendors" accept-charset="UTF-8" id="frmManageCoding">
    <input name="_token" type="hidden" value="soXhq24ixsvzhRKPDBwcSgeyxv3BiqIW5LJWhjCX">
    <input type="hidden" name="_method" value="POST">
    <input id="id" name="id" type="hidden">
    <input id="page" name="page" type="hidden" value="vendors">
    <div class="modal-header">
        <h5 class="modal-title" id="manageCodingModalLabel">Add New</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label for="name">Name</label>
            <input class="form-control" placeholder="Enter brand name" required="required" name="name" type="text" id="name">
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
    </div>
</form>

Any suggestions?

Where are you calling this from? Maybe you're calling it before the DOM element has been created. — Barmar, Jan 04 '18 at 02:28
Maybe this is the answer: https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — Barmar, Jan 04 '18 at 02:39
@Barmar, I am calling it from a function that is linked to a button with onclick event. — CairoCoder, Jan 04 '18 at 03:03
Then it should work. Can you post an executable stack snippet? — Barmar, Jan 04 '18 at 03:03
@Barmar, I've tried it through jsfiddle and it's working, strange. while it's not working in project code. — CairoCoder, Jan 04 '18 at 03:08
Probably a typo in the real code, which you didn't copy here or the fiddle. — Barmar, Jan 04 '18 at 03:11

score 1 · Answer 1 · answered Jan 04 '18 at 03:11

1

If you're using an ID you shouldn't need to target a specific item within an array ([0] implies it's the first item). Try this (untested but easy to try)

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

Hope it works, good luck :)

answered Jan 04 '18 at 03:11

Jwizzle

66
4

score 1 · Answer 2 · answered Jan 04 '18 at 03:18

1

Got it fixed.

I was using appendTo function the wrong way, which causes the form to be empty before using Reset() function, which leads to that error.

Thanks to @Barmar who helped me figure that out.

answered Jan 04 '18 at 03:18

CairoCoder

2,611
7
39
60

Using Reset() function with a form returns "property of undefined"

2 Answers2