James Wiseman

The enduring popularity of this question on Stackoverflow: How to do this using jQuery – document.getElementById(“selectlist”).value took me back to the very first issue I had with jQuery. Namely:

Why on earth does $(“myid”) not give me the DOM object for “myid” like document.getElementById(“myid”)?

In fact it gives you a collection of all elements <myid> which for this is almost certain to be empty.

But no-one explains this to you. No-one takes you aside and says, “listen, forget the DOM, forget all its functions, pretend it never existed…this is all DIFFERENT”…or something.

This is the first thing you should know about jQuery. Everything else is trivial.

As I intimated in my answer $() and document.getElementbyId are “Equivalent”.

Being in the right place at the right time to answer this question was fortunate, and was the Stackoverflow equivalent of a Jackpot if you care about your reputation points. Here is the answer I gave, and how it looks after four revisions:

While…

$('#selectlist').val();

…is equivalent to…

document.getElementById("selectlist").value

…it’s worth noting that…

$('#selectlist')

…although ‘equivalent’ is not the same as…

document.getElementById("selectlist")

…as the former returns a jQuery object, not a DOM object.

To get the DOM object(s) from the jQuery one, use the following:

$('#selectlist').get(); //get all DOM objects in the jQuery collection
$('#selectlist').get(0); //get the DOM object in the jQuery collection at index 0
$('#selectlist')[0]; //get the DOM objects in the jQuery collection at index 0

It should also be noted that the return from $() is a collection, and may contain MANY items. If you are selecting by ID (using #) then you will only ever get one item

Most of us have probably done it. A web page, some fields, and a button. The button is disabled until you fill-out/select the required fields.

Here is our disabled button:

But, how disabled is it?

Well, as it turns out, not very.

I’m assuming that if you’re reading this you’ll have Firefox with Firebug installed (even if you don’t use it all that much). Either that or you’ll have IE with the developer toolbar. Either way, hit F12 – this should bring it up.

However which way you can, navigate to the point in the DOM containing the ‘Click Me’ button.

You’ll then be able to delete the ‘disabled’ attribute, allowing you to click the button.

This is where some good server-side validation comes in handy. Never rely on JavaScript or HTML styles/attributes alone. They can always be circumvented. Server-side validation, broadly speaking, cannot!

Recently I encountered a business requirement whereby it was stipulated that both radio buttons in a group be left unchecked. In addition to this, a check was required to forcing the user to select one before they can continue.

This struck me as being direct contradiction as to what a Radio button was trying to achieve, and that it was actually more work as you were forcing the user to make a choice without giving them a default.

It just felt wrong.

But I wasn’t sure, so I did a bit of research, and came up with the following.

Firstly (and some could say, lastly) there is the W3 Recommendation at http://www.w3.org/TR/html401/interact/forms.html#radio:

At all times, exactly one of the radio buttons in a set is checked.

And that ought to be it, but for completeness, here is quite a nice set of guidelines regarding this http://www.useit.com/alertbox/20040927.html:

Always offer a default selection for radio button lists. By definition, radio buttons always have exactly one option selected, and you therefore shouldn’t display them without a default selection. (Checkboxes, in contrast, often default to having none of the options selected.)

If users might need to refrain from making a selection, you should provide a radio button for this choice, such as one labeled “None.” Offering users an explicit, neutral option to click is better than requiring the implicit act of not selecting from the list, especially because doing the latter violates the rule of always having exactly one option chosen.

I probably should understand more about CSS positioning and layout styles on HTML DIVs, as its integral to today’s modern web page.

The days where I used to lay everything out in a borderless HTML table are long gone, but despite this many of the features of DIV positioning remained a mystery to me until I stumbled across Barely Fitz Designs Learn CSS Positioning in Ten Steps.

You get ten simple demonstrations on the positioning options, which covers all you need to know. Practice, as always, makes perfect, to its worthwhile having a play yourself.

He even invites you to buy him a beer for his efforts. I didn’t, but don’t let that stop you.

Mmmm, now I’m thirsty.

Have you ever found yourself wanting to test out a bit of HTML/CSS/JavaScript without having access to an IDE or being bothered to fire it up?

Do you want to hack prototype a bit of code quickly without fuss?

Or maybe you’re one of those StackOverflow answerers that Race To Get The First Answer In.

If your answer is ‘yes’ or ‘I am actually’ then there’s probably a myriad of different resources you can call upon to help out, but you might consider JSFiddle

I created  a really simple bit of code:

HTML

<input type="checkbox" />

JavaScript/jQuery

$("input").click(function(){alert("test");});

Then I selected ‘jQuery 1.4.2.’ from the ‘Choose Framework’ section and clicked run.

When I clicked on the checkbox, everything hung together like a dream:

At the time of writing the blurb stated that it was still under heavy development, however I still thought it was a genuinely nice little tool that I wanted to share.