logo

JavaScript is your own worst enemy

See if your brains have woken up, this Monday morning, more than mine has. Have a look at this line of HTML and the JavaScript error it produces. See if you can work it out. It took me a while and that was after I asked somebody else to have a look.

<input type="submit" name="submit" onclick="this.form.submit()" value="Submit" />

JavaScript error dialog box

Come on it's easy. I've narrowed it down to one line of code for you. More than you can say for the JavaScript "debugger" that comes with IE. Personally I try not to use IE when I'm writing JavaScript. You're much better off with Mozilla's JavaScript Console which you can launch from the Tools menu.

Anyway, have fun. I didn't. While you're looking at that I am busy working on an article that shows a new way of using views to create JavaScript. Give me until midweek...

Update: Okay. I apologise. It was far too easy and I feel I have offended you, the readers, in thinking it would be in any way challenging. Anyway, the lesson is - be careful what you name your HTML objects. The same applies to adding field to forms. Try to avoid giving your fields names like "print", "submit", "location" etc etc

Comments

  1. hi

    i contend that the line did not work because it named the button 'submit'.

    This conflicts with the form method submit() and the onclick event is then actually calling the button, not the method.

    The following would work (i reckon):

    <input type="submit" name="NotSubmit" onclick="this.form.submit()" value="Submit" />

    • avatar
    • Jake
    • Mon 22 Sep 2003 07:20

    Well done, cuschman. I should haven given my readers more credit and known you guys would get it straightaway.

    Lesson being - be careful when naming your objects in HTML.

  2. Try this free Script Debugger from Microsoft!

    {Link}

    • avatar
    • Jake
    • Mon 22 Sep 2003 08:34

    I used to like and use the MS Script Debugger but in the end I found it too obtrusive in my day-to-day web browsing. Amazing how many sites there are with JS errors all over their pages. Meaning that, everytime you find one, you have to mess about closing the dubugger....

    • avatar
    • Henk
    • Mon 22 Sep 2003 09:43

    Stupid question perhaps, but why did you use JavaScript in the first place? Isn't it redundant in the above example?

    • avatar
    • Jake
    • Mon 22 Sep 2003 09:46

    Not at all stupid Henk. Well spotted. It is indeed redundant. The actual code used was different to that. I just typed the above out from memory. It should read type="button". The actual onclick event was slightly different but the end call to submit() was the same...

    • avatar
    • Chris
    • Mon 22 Sep 2003 10:56

    Ohhhh... I've done that before. I see someone's already answered, so I won't post the answer again, but rest assured... you aren't the first to be stumped on that one.

  3. Agreed, the Mozilla debugger (and DOM inspector, etc.) are very good, but if you want to debug in MSIE, then use VisualStudio.NET's debugger instead of the crappy default script debugger toy. The .NET debugger is actually very capable and good.

  4. Not only should you avoid function names, as I learned two weeks back, avoid sharing div names (across subforms perhaps) with input names. Whichever preceeds in the order of execution is the object you get... good luck asking your javascript to guess.

    Jerry

    • avatar
    • Ferdy
    • Mon 22 Sep 2003 15:25

    Maybe a little over the top, but the way I prevent these things is by applying strict naming conventions. A button could be named "btnSubmit", a string "strTemp", a field on a company form "comAddress", etc. We even agreed these standards across our department so we can read each other's code more easily. Common sense, but it works for us.

  5. Short note by: The JScript debugger mentioned by LasseLotus comes as an installable option at least with Windows 2000 (not sure about XP) anyway. Just check the "Add/remove Windows components" section of the "Software" dialog. I doubt it's been updated since then. Personally I don't mind clicking a "No" button everytime there is a faulty JavaScript on some website, but then there is still the option to turn JavaScript Debugging on only when it's needed.

    • avatar
    • Tom
    • Tue 23 Sep 2003 23:04

    I think "submit()" without "this.form." would do it...any specific reason for that?

  6. According to the JavaScript Reference, submit() is a method of the form object, not a top level function. Might work (not sure about it) in some browsers, but that's not the clean way to do it.

  7. Thanks so much for posting this. Needless to say, I am one of those dunces who made a similar mistake and wasted a lot of time trying to solve it before running across your article on Google. You probably saved me another hour or two of staring blankly at the screen completely missing the hidden variable I stupidly named 'submit'. It never fails. Whenever I attempt to use JavaScript for anything, it always turns out to be a major pain. It reminds me why I swore off it in the first place.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Mon 22 Sep 2003

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content