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!
