2012-02-21 16 views
-1

私はSE 4.20で新しくなりました。私はこのフォーム要素のフォーム要素onchangeを作成する問題を抱えています。動的にソーシャルエンジンのフォーム特定のフォーム要素の要素追加onchange

説明のため、 私はフォームを持っています。私はこのフォーム要素の変更にいくつかの選択肢の値を返すことができます。しかし今、私はこの要素の変更にフォーム要素を追加したいと思います。

答えて

0

ユーザーが選択ボックスを変更した場合、テキストボックスのようなフォーム要素を追加しますか?多分何か:HTMLここ

$("#selectBoxId").change(function(){ 
    $("#formId").append("<input type='text' name='additionalFormElement' />"); 
}); 
0

をされています

<div class="form-elements"> 
<div id="typeName-wrapper" class="form-wrapper"> 
    <div id="typeName-label" class="form-label"> 
     <label for="typeName" class="required">Type</label> 
    </div> 
    <div id="typeName-element" class="form-element"> 
     <select name="typeName" id="typeName"> 
      <option value="Grant">Grant</option> 
      <option value="Cooperative Agreements">Cooperative Agreements</option> 
      <option value="Publication">Publication</option> 
     </select> 
    </div> 
</div> 
<div id="resourceName-wrapper" class="form-wrapper"> 
    <div id="resourceName-label" class="form-label"> 
     <label for="resourceName" class="required">Name</label> 
    </div> 
    <div id="resourceName-element" class="form-element"> 
     <select name="resourceName" id="resourceName"> 
      <option value="ABC">ABC</option> 
      <option value="XYZ">XYZ</option> 
     </select> 
    </div> 
</div> 

ここではmootoolのJSです:

$('typeName').addEvent('change', function(event) { 
     var typeName = $('typeName').value; 
     var base_path = "<?php echo $this->baseUrl();?>/"; 
     var url = 'http://xxxxxxx.com/test/resource/getresourcebytype'; 
     var request= new Request.JSON({ 
      url: url, 
      method: 'GET', 
      data: {"typeName":typeName}, 
      onSuccess: function(response) 
      { 
       console.log(response); 
       //clear the select box 
       var name = $('resourceName'); 
       while (name.firstChild) { 
        name.removeChild(name.firstChild); 
       } 
       //now add new option 
       for (var i = 0; i < response.length; i++){ 
        console.log(response[i]); 
        new Element('option', {'value': response[i].value, 'text':response[i].label}).inject(name); 
       } 

      }, onFailure: function(){ 

       console.log('failed'); 
      } 
     }); 
     request.send(); 
    }); 
関連する問題