留言板

Radio button event

Chris Tantalo,修改在11 年前。

Radio button event

Junior Member 帖子: 33 加入日期: 12-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.


	<aui:fieldset>
<h2><liferay-ui:message key="register.organization" /></h2>
	</aui:fieldset>
<label class="aui-field-label">Type of Organization</label> <aui:input label="Choice 1" name="role" type="radio" value="3" checked="true" /> <aui:input label="Choice 2" name="role" type="radio" value="4" /> <aui:input label="Other" name="role" type="radio" value="5" onClick="showDiv(divCheckbox)" /> &lt;%--<div id="divCheckbox" style="visibility: hidden"> --%&gt; <div id="divCheckbox" class="desc" style="display: none;"> <aui:input label="rorgType" name="customOrgType" type="text" inlineField="true" value="" /> </div> </div> <aui:column> <div> <aui:input label="rname" name="name" inlineField="true" /> </div> </aui:column> &lt;% function showDiv(divid){ document.getElementById(divid).style.visibility="visible"; } %&gt;
Chris Tantalo,修改在11 年前。

RE: Radio button event

Junior Member 帖子: 33 加入日期: 12-8-21 最近的帖子
Could not figure it out with alloy

used simple javascript

<style>

.hidden { visibility: hidden; }
.unhidden { visibility: visible; }

</style>
<script type="text/javascript">
 function unhide(divID) {
 	var item = document.getElementById(divID);
 	if (item) {
 	//item.className=(item.className=='hidden')?'unhidden':'hidden';
	 item.className='unhidden';
 	}
 }

 function hide(divID) {
	 var item = document.getElementById(divID);
		 if (item) {
		 	item.className='hidden';
		 }
	 }
 
 
</script>
thumbnail
Javier Solana,修改在9 年前。

RE: Radio button event

Junior Member 帖子: 59 加入日期: 14-6-26 最近的帖子
This option worked fine for me. Here my complete code in case is useful for someone else:


<aui:field-wrapper> 
    	<aui:input name="final_4" type="radio" value="0" label="one" onclick="hideDiv('text_other')">
    		<aui:validator name="required" />
    	</aui:input> 
    	<aui:input name="final_4" type="radio" value="1" label="two" onClick="hideDiv('text_other')" /> 
    	<aui:input name="final_4" type="radio" value="2" label="other" onClick="showDiv('text_other')" /> 
    	<div class="hidden" id="text_other">
			<aui:input type="text" name="text_other" label="" />
		</div>
    </aui:field-wrapper>

    <style>
 		.hidden { visibility: hidden; }
 		.unhidden { visibility: visible; }
 	</style>
 	
	<script type="text/javascript">
  		function showDiv(divID) {
     		var item = document.getElementById(divID);
     		if (item) {
     			item.className='unhidden';
     		}
 		}

 		function hideDiv(divID) {
     		var item = document.getElementById(divID);
         	if (item) {
            	item.className='hidden';
         	}
     	}
	</script>