Question

如何在带有YUI库的选择框中的onchange事件后插入其他输入文本框？

需要使用YUI，并使用PEAR Quickforms lib创建表单。

我的目的是：

$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'，则应该会出现一个文本输入字段，用于在选择框下输入新名称。

我的问题是，我不知道是否正确地将输入的名称传递给提交的quickform数据。

所以我通常使用$ form-＆gt; 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;

但是这不起作用，浏览器中没有输入字段。

有人能告诉我该怎么做吗？非常感谢！

Answer 1

我现在用...解决了这个问题。

'style'=>'display:none'

在quickform textinput元素中使用

...属性并使用...

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

...在onchange事件中调用。

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

1 个答案: