论坛

主页 » Alloy UI » English

组合视图 统一视图 树状图
讨论主题 [ 上一个 | 下一个 ]
toggle
Chris Tantalo
Radio button event
2013年3月19日 上午8:56
答复

Chris Tantalo

等级: Junior Member

帖子: 33

加入日期: 2012年8月21日

最近的帖子

Very new to AlloyUI, just trying to make a quick change to Liferays registration pages. Basically, there are three radio buttons, and for the third choice, is an option for "Other". When, and only if this is selected, I would like an input box to appear.

I have looked at numerous blogs, but nothing gives a solid demo of how to get this working in AlloyUI. I am attaching my code snippet below.

 1
 2    <aui:fieldset>
 3<h2><liferay-ui:message key="register.organization" /></h2>
 4    <div>
 5        <label class="aui-field-label"  >Type of Organization</label>
 6            <aui:input label="Choice 1" name="role" type="radio" value="3" checked="true" />
 7            <aui:input label="Choice 2" name="role" type="radio" value="4" />
 8            <aui:input label="Other" name="role" type="radio" value="5" onClick="showDiv(divCheckbox)" />
 9        <%--<div id="divCheckbox" style="visibility: hidden"> --%>
10        <div id="divCheckbox"  class="desc" style="display: none;">
11            <aui:input label="rorgType" name="customOrgType" type="text" inlineField="true" value="" />
12        </div>
13    </div>
14        <aui:column>
15        <div>
16            <aui:input label="rname" name="name" inlineField="true"/>
17        </div>
18        </aui:column>
19    </aui:fieldset>
20<%
21function showDiv(divid){
22   document.getElementById(divid).style.visibility="visible";
23}
24%>
Chris Tantalo
RE: Radio button event
2013年3月19日 下午1:53
答复

Chris Tantalo

等级: Junior Member

帖子: 33

加入日期: 2012年8月21日

最近的帖子

Could not figure it out with alloy

used simple javascript
 1
 2<style>
 3
 4.hidden { visibility: hidden; }
 5.unhidden { visibility: visible; }
 6
 7</style>
 8<script type="text/javascript">
 9 function unhide(divID) {
10     var item = document.getElementById(divID);
11     if (item) {
12     //item.className=(item.className=='hidden')?'unhidden':'hidden';
13     item.className='unhidden';
14     }
15 }
16
17 function hide(divID) {
18     var item = document.getElementById(divID);
19         if (item) {
20             item.className='hidden';
21         }
22     }
23
24
25</script>
Javier Solana
RE: Radio button event
2014年9月9日 上午5:58
答复

Javier Solana

等级: Junior Member

帖子: 36

加入日期: 2014年6月26日

最近的帖子

This option worked fine for me. Here my complete code in case is useful for someone else:

 1
 2<aui:field-wrapper>
 3        <aui:input name="final_4" type="radio" value="0" label="one" onClick="hideDiv('text_other')">
 4            <aui:validator name="required" />
 5        </aui:input>
 6        <aui:input name="final_4" type="radio" value="1" label="two" onClick="hideDiv('text_other')"/>
 7        <aui:input name="final_4" type="radio" value="2" label="other" onClick="showDiv('text_other')"/>
 8        <div class="hidden" id="text_other">
 9            <aui:input type="text" name="text_other" label=""/>
10        </div>
11    </aui:field-wrapper>
12
13    <style>
14         .hidden { visibility: hidden; }
15         .unhidden { visibility: visible; }
16     </style>
17    
18    <script type="text/javascript">
19          function showDiv(divID) {
20             var item = document.getElementById(divID);
21             if (item) {
22                 item.className='unhidden';
23             }
24         }
25
26         function hideDiv(divID) {
27             var item = document.getElementById(divID);
28             if (item) {
29                item.className='hidden';
30             }
31         }
32    </script>