Home & blog  /  Tag: form  /

Using Dropdown as a fancy form field

posted: 09 Aug '11 08:31 tags: dropdown, select, form

Not before time, I've updated my Dropdown plugin for jQuery. It now supports a new 'form field' mode, meaning you can use Dropdown as a fancy alternative to a , it submits a value to the server once the form is submitted.

It does this by creating a hidden field, whose value is updated every time an 'option' in the dropdown is selected. The name of this hidden field (i.e. the name of the value that should be sent to the server on submit) is denoted a parameter at set-up. Here's an example of using Dropdown in form field mode:

1new Dropdown({

2     mode: 'form',

3     data: [{val: 1, text: 'dog'}, {val: 2, text: 'cat'}, {val: 3, text: 'platipus'}],

4     startText: 'Select an option...',

5     fieldName: 'animal'

6});

Head over here to download, get usage info or view a demo.

post a comment

Round-up: IE6 radio bug; updated Dropdown...

posted: 19 Sep '10 19:34 tags: drop-down, IE, IE6, radio, form, Javascript

First up, thanks to Gerard Okono, who brought to my attention a bug in IE 6 and 7 whereby radio buttons inserted after the DOM has loaded are apparently uncheckable.

Domscripter, my handy DOM-scripting time-saver, has therefore undergone a fudge to get round this problem, involving using a click event to force the clicked radio button to be checked, at the same time unchecking any previously-checked sibling of the same radio family. See the full fudge here.

Secondly, Dropdown has undergone a bit of a revamp. It now accepts more parameters and you have the option of breaking the links in the drop-down into columns - handy for drop-downs with lots of links. Head over here for full info.

Currently Dropdown is a navigation tool designed for aps, but I'm going to tweak it to be usable in forms, too. Stay posted...

post a comment
^^ top of page

UI for Postcode Anywhere address look-up

posted: 08 Jun '10 15:44 tags: address, AJAX, cURL, PHP, form, Javascript, jQuery

Just posted this in the scripts section. It's a user interface for the popular and very useful Postcode Anywhere address look-up service.

They seem to like it - they tweeted about it earlier.

Head over here to download, get usage info or view a demo.

The focus, as ever, is on integration. You set a few config vars, call the script into your page and that's it. You even need to prepare any elements; the look-up link or button is DOM-scripted into your page next to your postcode field, while returned addresses are displayed as links in a neat scrolling

that is DOM-scripted under your field.

post a comment
^^ top of page

Ajaxify - re-route your forms via AJAX

posted: 06 Jun '10 12:38 tags: AJAX, form, validation, Javascript, jQuery

Ah, AJAX. From cleaning product to elegant means of sending and retrieving data without clunky page loads. There were those of us who, before AJAX came along, used to route forms through hidden iframes to achieve a similar effect.

But re-wiring your forms to go via AJAX can be time-consuming and tough, so I've just posted Ajaxify, which does it for you.

Head over here to download, get usage info or view a demo.

It acts on any form that has a class in the following format. The part after the hyphen is the name of an optional callback function to which the AJAX response is passed:

class='ajaxify-mycallback'

The only snag is it doesn't presently support file uploads, since there remains no way (or at least no way without a lot of fudge) to do thise in AJAX. I'll soon be modifying it, though, to route file uploads as a separate request through a DOM-scripted, hidden iframe.

post a comment
^^ top of page
older posts >