customize registration form in joomla 2.5 - enable fields on the fly based on radio button value

Question

I want to customize joomla registration form. I ve added 2 text fields (company name, vat_number) and i ve created a radio button customerType with 2 options(business user, normal user).

Now all the fields are visible in the form. What i want is, when the user selects business user to enable the 2 text fields and when he selects normal user to disable them on the fly.

I guess i need to add javascript to the form. Can anyone help?

Thank you!

Answer 1

I have done this in here

# Script to show hide div
<script type="text/javascript">
    function show(obj) {

    if(obj == 'farmer')
    {
        document.getElementById('SkiDiv1').style.display = 'block';
        document.getElementById('SkiDiv2').style.display = 'none';
    }

    if(obj == 'landowner')
    {
        document.getElementById('SkiDiv2').style.display = 'block';
        document.getElementById('SkiDiv1').style.display = 'none';
    }
    if(obj == 0)
    {
        document.getElementById('SkiDiv2').style.display = 'none';
        document.getElementById('SkiDiv1').style.display = 'none';
    }

    }
    </script>

# Selct from dropdown
<select  name="siteusertype" class="inputbox1 required" onchange="show(this.value)">
    <option id="selectuser" value="0">Select User</option> 
    <option value="farmer">Are you a Farmer ?</option>
    <option value="landowner">Are you a Landowner ?</option>
</select>

# Both div with different IDs
<div id="SkiDiv1"> User 1 field </div>
<div id="SkiDiv2"> User 2 field </div>

Answer 2

1- Make a function on javascript and reference in onClick event of each radio.
2- Inside javascript function use getElementById function of javascript to set visible or invisible any html element of form according user selection.

function hideElement()
{
   if (user select you want)
      document.getElementById("element-to-hide").style.visibility="hidden";
   else
     //if you want display element
      document.getElementById("element-to-display").style.visibility="visible";
}

see example:
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
http://www.w3schools.com/jsref/prop_style_visibility.asp