如何在select onchange事件后添加输入文本框


YUI JavaScript - How to add input textbox after select onchange event?

如何在使用YUI库的选择框中的onchange事件后插入额外的输入文本框?

需要使用YUI,表单是用PEAR Quickforms库创建的。

我得到的是:

$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));

如果我更改选择框中的选项,则会弹出警告,这适用于测试。

现在我需要检查选择的选项,如果这等于'NEW',应该会出现一个文本输入字段,在选择框下输入一个新名称。

我的问题是,我不知道如何正确地将输入的名称也传递给提交的快速表单数据。

所以我用$form->addElement('input',…)创建了元素,并复制了它的html源代码。在选项更改事件中,我尝试在正确的位置插入原始html代码:

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;

但是这不起作用,浏览器中没有显示任何输入字段。

谁能告诉我怎么做才对?非常感谢!

我现在用…

'style'=>'display:none'

…属性,并使用…

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

…在onchange事件中调用