TypeError: '[object HTMLInputElement]' is not a function (evaluating 'elem[ type ]()') in jQuery form.submit()

Question

Has never run into this issue? I'm getting this error in the latest release of jQuery. I tried with version 1.6.2 and there is no issue.

TypeError: '[object HTMLInputElement]' is not a function (evaluating 'elem[ type ]()')

line 3175

Has anything changed that we should be aware of?

Thanks, Jack

Solution 1

This usually happens if any of your input tag's name is submit. For example,

<form id="frm">
    <input type="submit" name="submit" value="Post" />
</form>

On the above code, document.getElementById("frm").submit represents the input element. When you apply () to submit It shows this error.

Solution 2

I have found that this error will occur when using the onclick attribute to call a JavaScript function with the same name as either the id or name attributes on an input element:

<input id='foo' name='fooName' onclick='foo();'> <!-- BAD: id matches function -->

<input id='fooId' name='foo' onclick='foo();'> <!-- BAD: name matches function -->

<input id='fooId' name='fooName' onclick='foo();'> <!-- WORKS! -->

This behavior occurs irrespective of input type.

Solution 3

I hade a similar issue with safari recently on a bit of javascript to submit a form. Turned out to be due to the submit input element having the name="submit", which was conflicting causing it to return it as not being a function.

Comments

[juminoz]

Thanks Shiplu. That was it. I guess I have to be more careful about what name to use when using jQuery.

[Felix Kling]

@juminoz: That's not related to jQuery, it is a general JavaScript/DOM/scope problem.

[juminoz]

@FelixKling That may be true, but since I didn't see the same issue in version 1.6.2, I assumed that something might have changed.

[kasimir]

This is mentioned in the jQuery docs, but the wording is rather vague: 'Name conflicts can cause confusing failures.' So good thing there's something like the SO community for practical answers to practical problems.

[Jazzy]

Solved something for me, too. Good rule I will now follow is don't use IDs that are the same as the input type.

[Blu Towers]

This was driving me crazy all day $('#form").submit() and $("#form").trigger('submit') nothing would work, my submit button was named submit...changed it and now working, thanks!

[John Contarino]

This is exactly what was causing the error for me. I had a checkbox setup as such: <input type="checkbox" id="toggleCheck" name="toggleCheck" onClick="toggleCheck();"> It worked properly once I renamed the "name" and "id" tags: <input type="checkbox" id="toggleCheckbox" name="toggleCheckbox" onClick="toggleCheck();">

[texelate]

This answer is very good (saved me a lot of time!) but does anyone know the reason why jQuery won't allow name="submit"? It would be good to know that.

[Rikco]

took me ages to found your solution because nobody wrote a real example with ids and names.. otherwise these guys would realize, that matching names cause this error. thanks a lot!