Change value header text conditional

Hello,

I got another question. I have a very simple form, 1 textfield, 1 select box, and 1 header text.
Here is the code:

<div class="ccms_form_element cfdiv_select" id="kind_container_div"><label for="kind">Kind:</label><select size="1" id="kind" class="" title="" name="kind">
<option value="Car">Car</option>
<option value="Bike">Bike</option>
<option value="House">House</option>
<option value="Villa">Villa</option>
</select>
<div class="clear"></div><div id="error-message-kind"></div></div><div class="ccms_form_element cfdiv_text" id="lengte_container_div"><label for="lengte">Lengte/Opp. *</label><input id="lengte" maxlength="150" size="30" class="" title="" type="text" value="" name="lengte" />
<div class="clear"></div><div id="error-message-lengte"></div></div><div class="ccms_form_element cfdiv_header" id="autoID-9da3dc3e9d366324815c4f90e8ac144d_container_div"><div class="clear"></div></div>

What's my question? Well, it's not very hard, I geuss.
I have a dropdown menu with 4 different "answers", you select one, and then you give, in the textbox, the length OR surface area from that answer you gave in the dropdown menu. There is an header text, which is shown after the length or surface area, in M of M2 (meter or square meter).
If the select is chosen as car or bike the header will display M. If the select is house or villa, the header text will display M2.

How am I gonna do it?

I am thinking of Javascript where:

if (kind.value == car OR kind.value == bike)
{
    header.value = meter
}

if (kind.value == house OR kind.value == villa
{
    header.value = square meter
}

Hi huubs,

Here's a snippet that works with your form. It adds a <span> after the input then sets the content of the span when the drop-down changes:

window.addEvent('domready', function() {
  var kind, m, lengte, unit;
  kind = $('kind');
  lengte = $('lengte');
  unit = new Element('span', {
    styles: {
      'padding-left': '6px'
    }
  });
  unit.inject(lengte, 'after'); 
  setUnit();
  kind.addEvent('change', setUnit);

  function setUnit() {
    if ( kind.value == 'Car' || kind.value == 'Bike' ) {
      unit.setProperty('text', 'M'); 
    } else if ( kind.value == 'House' || kind.value == 'Villa' ) {
      unit.setProperty('text', 'M2'); 
    } else {
      unit.setProperty('text', ''); 
    }
  };
});

Bob

Thank you GreyHead, you are a king!