0

如何使用 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));

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

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

我的问题是，我不知道输入的名称也传递给提交的快速表单数据是否正确。

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

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

有人可以告诉我如何正确地做吗？非常感谢！

4

1 回答 1

1

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

'style'=>'display:none'

...快速表单文本输入元素中的属性并使用...

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

...在 onchange 事件中调用。

于 2013-04-29T11:51:53.590 回答