Topic: ZF Hiding zend_form labels

[_tina_]

Hi,

I have a form which I show / hide fields based on a users selection.  I use JQuery for this:

Code: [Select]

<script type="text/javascript">
function toggle_field_type() {
var field_type = $('#link option:selected').text();
if (field_type == '') {
$('#url').parent().hide();
$('#pdf').parent().hide();
/*$('#url-label').parent().hide();
$('#pdf-label').parent().hide();*/
}
if (field_type == 'PDF') {
$('#url').parent().hide();
$('#pdf').parent().show();
} else if (field_type == 'Url') {
$('#url').parent().show();
$('#pdf').parent().hide();
}
}

$(document).ready(function(){
toggle_field_type();   
$('#link').change(function() {
toggle_field_type();
});
})
</script>

This is working fine, however, I need to also hide the labels for these two fields.  Does anyone know how to do this?

Thanks

[dgoosens]

we'd need to see the HTML code the script applies to...

[_tina_]

Here is the HTML generated:

Code: [Select]

<dt id="link-label"><label for="link" class="optional">Link:</label></dt>
<dd id="link-element">
<select name="link" id="link">
    <option value="" label=""></option>
    <option value="Url" label="Url">Url</option>
    <option value="PDF" label="PDF">PDF</option>
</select></dd>

<dt id="url-label"><label for="url" class="optional">Url:</label></dt>
<dd style="display: block;" id="url-element">
<input name="url" id="url" value="" type="text"></dd>
<dt id="pdf-label"><label for="pdf" class="optional">PDF:</label></dt>
<dd style="display: none;">
<input name="MAX_FILE_SIZE" value="133169152" id="MAX_FILE_SIZE" type="hidden">
<input name="pdf" id="pdf" type="file"></dd>

and here is the zend_form:

Code: [Select]

$elements['link'] = $this->createElement( 'select', 'link' )
->setLabel('Link:')
->setMultiOptions(array('' => '', 'Url'=>'Url', 'PDF'=>'PDF'));

$elements['url'] = $this->createElement( 'text', 'url' )->setLabel('Url:');
$elements['pdf'] = $this->createElement( 'file', 'pdf' )->setLabel('PDF:');

$elements['date'] = $this->createElement( 'text', 'date' )->setLabel('Date:');


we'd need to see the HTML code the script applies to...

I hide the elements named "pdf" and "url".  I just need to also hide their labels.  I tried hiding by the label name "pdf-label" and "url-label" but this just hid the whole form.

[_tina_]

Does anybody have any idea on this?

Thank you.

Here is the HTML generated:

Code: [Select]

<dt id="link-label"><label for="link" class="optional">Link:</label></dt>
<dd id="link-element">
<select name="link" id="link">
    <option value="" label=""></option>
    <option value="Url" label="Url">Url</option>
    <option value="PDF" label="PDF">PDF</option>
</select></dd>

<dt id="url-label"><label for="url" class="optional">Url:</label></dt>
<dd style="display: block;" id="url-element">
<input name="url" id="url" value="" type="text"></dd>
<dt id="pdf-label"><label for="pdf" class="optional">PDF:</label></dt>
<dd style="display: none;">
<input name="MAX_FILE_SIZE" value="133169152" id="MAX_FILE_SIZE" type="hidden">
<input name="pdf" id="pdf" type="file"></dd>

and here is the zend_form:

Code: [Select]

$elements['link'] = $this->createElement( 'select', 'link' )
->setLabel('Link:')
->setMultiOptions(array('' => '', 'Url'=>'Url', 'PDF'=>'PDF'));

$elements['url'] = $this->createElement( 'text', 'url' )->setLabel('Url:');
$elements['pdf'] = $this->createElement( 'file', 'pdf' )->setLabel('PDF:');

$elements['date'] = $this->createElement( 'text', 'date' )->setLabel('Date:');


we'd need to see the HTML code the script applies to...

I hide the elements named "pdf" and "url".  I just need to also hide their labels.  I tried hiding by the label name "pdf-label" and "url-label" but this just hid the whole form.

[_tina_]

I figured it out. 
I used:

Code: [Select]

$('label[for=pdf]').parent().hide();

Thanks for the replies.