So I spent several hours trying to get to the bottom of a rather annoying Javascript problem. I wanted a form that auto-submitted. For good reason of course – to enable data to be saved to a database, before it was transmitted somewhere else.
I created a test page to check the Javascript method required: document.formname.submit() or document.forms['formID'].submit() (my Javascript is a little rusty because, I’m glad to say, I rarely use it). This worked fine, so I added the little bit of code to the real page. It promptly refused to work. No matter what I tried, it wouldn’t auto-submit, and the debug console said "document.formname.submit is not a function". How bizzare! No end of googling could find an answer. The code was right, according to all sources. I changed names of the form and added IDs galore, but no joy.
Then it hit me – the submit button in the form (I included one for those who might have no Javascript, or Javascript turned off) had the name attribute of "submit"! This meant that the submit button was the object: document.formname.submit , but I was trying to execute the method: document.formname.submit() . Javascript can’t cope with one object and a method of another object, having the same name. As soon as I changed the name of the submit button, all was well. It worked!
What a load of hassle for such a tiny error. So remember, when you give your form elements names or IDs, make sure they are different from the element tag. A good practice is to give the form a generic name, such as "mysite_signup" and then name its child elements with the formname as the prefix. So, an input field might be "mysite_signup_email_address", and the submit button might be "mysite_signup_submit". Unique naming baby – it’s the way forward.