YUI JavaScript-选择onchange事件后如何添加输入文本框？

Question

How can I insert an additional input textbox after an onchange event in a selectbox with the YUI library?

It is required to use YUI and the form is created with the PEAR Quickforms lib.

What I have yet is this:

$form->addElement('select', 'names', "Choose Name", $options, array('style'=>'width:300px', 'onchange' => 'name_changed(this.value);'));

$js = 
<<<EOS
<script type="text/javascript">
    function name_changed(name) {
        alert('name is changed');
    }
</script>
EOS;

$form->addElement('static', 'jsembed', '', utf8_encode($js));

The alert pops up if I change the option in the selectbox, this works for testing.

Now I need to check the chosen option and if this equals 'NEW', there should appear a text input field to enter a new name under the select box.

My problem is, that I don't know to do it right that the entered name is also passed to the submitted quickform data.

So I've created the element normally with $form->addElement('input',...) and copied the html source of this. On the option change event I've tried to insert the raw html code at the right position with this:

var htmlContent = '<div id="fitem_id_dbname" class="fitem fitem_ftext"><div class="fitemtitle"><label for="id_dbname">Create new DB </label></div><div class="felement ftext" id="yui_275"><input size="60" name="dbname" type="text" value="" id="id_dbname"></div></div>';
document.getElementsByClassName('fcontainer clearfix').innerHTML = htmlContent;

But this doesn't work, there appears no input field in the browser.

Could anybody show me how to do it right? Lots of thanks!

Answer 1

I solved it for me now with the...

'style'=>'display:none'

...property in the quickform textinput element and use...

document.getElementById('id of the input element').style.display = 'block';

... which is called on the onchange event.