logo

Wood For The Trees

This morning I was working on a widget-like form that used YUI to Ajax POST a form to the server and alert the user to the result. Once a result was returned I wanted to set the form's values back to zero so the user could re-use it with new values ad infenitum.

Using YUI, as I was, I went to the API documentation to see whether they had a Form class and whether a "reset" method has been implemented. After some messing with one particular red herring I gave up and resigned myself to manually blank or uncheck each field one by one using my own JavaScript.

While doing this it suddenly occured to me I was being a numpty and didn't need to. The Form HTML Element has its very own reset() method built in to the browser's core JavaScript. So the following one-liner would do:

document.forms[0].reset()

That's the trouble with all these JavaScript libraries and frameworks — you come to rely on them so heavily that it's easy to forget there was ever any other way and that they're not always the only answer.

Comments

    • avatar
    • Mike
    • Mon 5 Mar 2007 08:42 AM

    I had no idea .. thanks Jake. This will come in handy in the very near future.

    • avatar
    • Mark
    • Mon 5 Mar 2007 08:49 AM

    Nice thing that I also did not know. Now you can build a bookmarklet that allows you to reset every form in the internet that you use.

    javascript:window.document.forms[0].reset();

    Maybe it can include also the forms array. This way you can also handle documents which contains more than one form...

    • avatar
    • Jake Howlett
    • Mon 5 Mar 2007 09:01 AM

    Odd that it's not so well known. It's just the same as an <input type="reset"> button.

    It would be useful with Firefox which I find now refuses to forget entered field values when you refresh a page. No doubt useful to the user (?) but a pain for a developer doing any testing...

    • avatar
    • Mark
    • Mon 5 Mar 2007 09:18 AM

    I still love using selfhtml {Link}

    It is just one click to find the reset functions. The english translation is not ready yet but for web development it is still my number one resource...

  1. I've used up quite a lot of hours at work, over-complicating things.. Whether it is JavaScript or CSS.

    Because of reading a lot about web-standards, I seem to have gotten phobia for tables..

    Spent some hours trying to make a grid of photos using unordered list (JSON->HTML). Could only get it to work in FireFox.

    Mentioned this to my boss, who proposed using tables.. Rewrote the function to use tables in five minutes, and it worked great..

    • avatar
    • Bill E
    • Mon 5 Mar 2007 02:24 PM

    Gah. That's the problem with tables. You get working on something, and in the end it's like, "screw it, it'll be in a table and I won't have to think."

    • avatar
    • Jake Howlett
    • Mon 5 Mar 2007 03:28 PM

    The trick with tables is to know what belongs in them. If it's tabular data you're trying to represent - stick it in a table. If not - don't.

Your Comments

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


About This Page

Written by Jake Howlett on Mon 5 Mar 2007

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