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

選択ボックスのオプションを変更するとアラートがポップアップします。これはテスト用に機能します。

ここで、選択したオプションを確認する必要があります。これが「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;

しかし、これは機能しません。ブラウザーに入力フィールドが表示されません。

誰かがそれを正しく行う方法を教えてもらえますか? どうもありがとう！

4

1 に答える 1

1

私は今それを解決しました...

'style'=>'display:none'

...quickform textinput 要素のプロパティと使用...

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

... onchange イベントで呼び出されます。

于 2013-04-29T11:51:53.590 に答える