How to hide/show input fields in form?

Question

Good Day guys,

I have this code right here in javascript on hiding/showing an input field:

function HideShow()
{
    var Type = document.getElementById("jform_subscription_type");

    if(Type.value=="RDS")
    {
        var x = document.getElementById("jform_frequency").style.display = 'block';         
    }
    else
    {
        var y =document.getElementById("jform_frequency").style.display = 'none';           
    }   
}

Now this code works well. But in my form, it becomes like this:

the input field is getting doubled. When I remove this code below in my form, my javascript code does not work.

<div class="control-group">
    <div class="control-label"><?php echo $this->form->getLabel('frequency'); ?>    </div>
    <div class="controls"><?php echo $this->form->getInput('frequency'); ?></div>
</div>

How do i make it such that my javascript code hides the input for frequency with the code above?

Answer 1

I got the answer. I just need to set an ID to the div containing the input field I want to hide and show:

   <div class="control-group" id ="freq" style = "display:none">
    <div class="control-label"><?php echo $this->form->getLabel('frequency'); ?></div>
    <div class="controls"><?php echo $this->form->getInput('frequency'); ?></div>
</div>

and then on my javascript function, instead of the field itself, I will use the div Id.