Re:morse.nl

In some rare cases you might want to add a self defined attribute to an element. This can be handy to store additional data you might need in your application. Take the following HTML code for example:

<form name="clientEdit" action="/client.php" method="POST">
<!-- ...other form stuff here... -->
<select name="client">
    <option id="1" billable="1">Clint</option>
    <option id="2" billable="0">Steve</option>
    <option id="3" billable="1">Chris</option>
    <option id="4" billable="1">Rick</option>
</select>

The added attribute ‘billable’ will be used to check if a client can be billed by our application. Using javascript you can disable the invoice button or display an alert when a non-billable client — in this case Steve — has been selected.

To get the billable attribute you can use the getAttribute() function like in the following example.

/* <![CDATA[ */
function createInvoice()
{
    with(document.forms['clientEdit'])
    {
        if(client.options[client.selectedIndex].getAttribute('billable') == 1)
        {
            alert("Client is billable, create the invoice");
        }
    }
}
/* ]]> */

As you can see, it’s simple to get the value of the attribute.