留言板
Radio button event
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.
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)" /> <%--<div id="divCheckbox" style="visibility: hidden"> --%> <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> <% function showDiv(divid){ document.getElementById(divid).style.visibility="visible"; } %>
Could not figure it out with alloy
used simple javascript
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>
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>