This is a handy keyword in JavaScript but only if you really understand what it means. Until recently I was confused. Then I read "this" and now I am feeling enlightened.

The article puts it quite simply:

In JavaScript this always refers to the "owner" of the function we're executing, or rather, to the object that a function is a method of.

Using this new knowledge I put it to use yesterday when I had to sort out problems with a web form. It was using a combination of the nasty "Refresh values on keyword change" field property, in conjunction with some hide when formulas to toggle the display of parts of the form. It worked but needed multiple round-trips to the server. In terms of usability it was a complete nightmare.

So I wrote a toggle function in JavaScript. The fields that previously used the refresh on change method now have a call to the toggle() function in their onclick event instead.

Here are some examples of if in use:

Toggling areas of a form on and off, based on user input, is always useful. In this example it's merely text but could well be fields in the hidden bits.

I'm sharing the function I ended up writing as not only useful but a lesson in simplicity and versatile coding.

The function could have easily have looked something like:

function toggle(id, obj){
 if(obj[0].checked) {
        document.getElementById(id).style.display='';
 } else {
        document.getElementById(id).style.display='none';
 }
}

While this might work for the radio button where "Yes" is the desired on state and it happens to be the first option, what about the second example where we want choosing no to display a certain section?

A much better way is to take some of the logic out the function and place it in the call to the function. To call the function above we would have used:

<input type="radio" onclick="toggle('test1', this)" />

But we could just as well call a function like this:

<input type="radio" onclick="toggle('test1', this.value=='Yes')" />

Yes you can do that! You can have your own litle bits of code forming the arguments passed to the function itself.

The onclick event uses "this" in the call to the function, rather than the function itself, which gets round the issue of scope mentioned in the linked article above.

The second argument received by the function is then a boolean, rather than a string or object, which we can call "show" and use like so:

function toggle(id, show){
 if(show) {
        document.getElementById(id).style.display='';
 } else {
        document.getElementById(id).style.display='none';
 }
}

For a radio button where you want to display a section when no is selected you simply change the call, rather than the function itself, like so

<input type="radio" onclick="toggle('test2', this.value.toLowerCase()=='no')" />

For the checkbox the call is

<input type="radio" onclick="toggle('test3', this.checked)" />

Simple isn't it! We could go one step further and simplify the function to one line:

function toggle(id, show){
	document.getElementById(id).style.display={show)?'':'none';
}

With this function in your JS Header of a form you can simply add the following to the onclick event of a field:

Domino will then add the call to each individual radio button and this.value will refer to each individual button, so no need to work out which one is selected.

The same function can be used by any type of field — or buttons, images and links for that matter. You just need to make sure the second parameter works out to a boolean. I like this function as it's ultimately portable. In the past I've written JavaScript functions that will only ever work in that one scenario — throw-away functions if you will. As my understanding of the language improves I find myself trying not to and this is one example of that.