Good grief!!! Finally found the answer to an error I was getting when trying to upload a file using the jQuery Forms plugin (jquery.forms.js). I’ve used that excellent little plugin a lot in the past, but just got stumped on this simple little problem. Seriously, this was not fun.
The Situation
- Using jquery.forms.js plugin in a WordPress app to upload a file
- The very same plugin (same file and everything) works in the old PhotoSmash plugin on the same website, but not in the new one
- In debugging, I slimmed down the form to the bare minimum…just the form tags, the file tag, and submit button
- It was throwing an error on ajaxSubmit() or ajaxForm(), when it goes to submit the form
Now, this was working fine when I was submitting the form without a FILE form tag. When you use a FILE tag, the jQuery plugin needs to use the iFrame method (you might want to specify “iframe: true” in your options when you do your ajaxForm() or ajaxSubmit(), just to be safe). For some reason, when it used the iFrame method, my problem reared its head.
The Error Message: Uncaught TypeError: Property ‘submit’ Not a Function
The full wording of the error in Chrome is: Uncaught TypeError: Property ‘submit’ of object <HTMLFormElement> is not a function
The answer is actually right there, but I was just too thick to see it!
The Answer
Notice where it says “Property ‘submit’ of object…not a function”? We’ll buried down in an answer that only got 1 vote on StackOverflow, was the answer: the ‘submit’ function of the form object is being overridden by something else. In my case, it was the “Submit” button!
Don’t give your Submit button name=’submit’!
Instead, make your submit button something like:
<input type="submit" name="submit_button" id="my-submit-button" value="Submit" />
That causes the form object to use the submit button as its ‘submit’ property instead of using the submit function.
So simple, and yet it ate up 3 hours. Ouch!
Hope this helps,
Byron
Comments are closed.