JS submit is not a function

Today I was asked by a colleague to aid them with adding functionality to a form that would allow it to be submitted by pressing ‘ctr + s’ keys.

As a group of web developers this key combination is something that comes almost naturally to us when editing and constantly saving code, so should prove a useful addition to the form that is not too difficult to implement.

I began by setting up the event observers to watch for the two required keys to be pressed.

Once the required key codes ( 17 and 83 ) were captured it should have been a case of simply referencing the form and applying the submit method.

document.forms['form_id'].submit();

To see if what was written so far would actually perform the desired action we tested the page using our default browser Firefox, only to discover we were receiving the following error:

document.forms.form_id.submit is not a function

This was all very puzzling but eventually resorting to a search on Google provided a number of answers.

It turns out that all our problems came back to the fact that the submit button on the form had been given the name of ‘submit’ – which is a JavaScript reserved word – resulting in ambiguity in the browser and therefore no longer referencing the method.

The solution to this is a very simple one – renaming the submit button to anything other than ‘submit’ or any of the reserved words in JavaScript.

FF AdBlock add-on blocking local images

I received an email last night from a colleague regarding his recent visit to the Fubra site using the Firefox web browser. In his email Matt Wardy pointed out that he could not see the central image on the homepage relating to advertising.

Fubra Site - Adblock image issue

Whilst digging around for a reason he found that there was an inline style of “display: none;” applied to the image although no inline style was visible in the source code, which asked the question of where was it coming from?

As with many development and layout issues in Firefox they often come back to one of the many extensions or add-ons that you have installed – for example wondering why JavaScript isn’t working and then realising that it’s simply because you had disabled it earlier on to ensure your site will work without it enabled :S.

In this case it was found to be that AdBlock was installed, so by either disabling the AdBlock add-on or whitelisting the Fubra site and hitting refresh, all image problems appeared to have been resolved – for now.

A quick solution was applied for anyone visiting the site with AdBlock enabled in order to avoid the hiding of imagery.

For now I’ve renamed the images and it seems to have solved the problem.

I found it very interesting that the AdBlock extension would automatically block localised images simple because they contained the phrase ‘advertising’.

It seems to me that the add-on may be acting a little greedy here and should maybe only exclude images from third party websites containing this phrase or similar phrases if any.

After all, adverts are usually put in place for a reason and in a lot of cases without them it’s unlikely that the site would be there at all.