Tuesday, 18 April 2017

how to show/hide divs based on radio button selection using aui script

My requirement is to show/hide div based on aui radio button option.I followed the below steps to do it.

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<portlet:defineObjects />
   
<div class="row">
    <div class="span5">
         <div class="loads">Whether Loads are operational during week-Ends and National Holidays:</div>
         <div id="selectalign">
                   <aui:input type="radio" name="nationalholidays" value="yes"
                                label="yes" />
                   <aui:input type="radio" name="nationalholidays" value="no"
                                label="no" />
         </div>
    </div>
    <div class="span7 running" style="display:none">
         <aui:input type="text"
                            name="whatistheMinRunningloadduringWeekendsandNationalHolidays"
                            label="If yes, what is the Min Running load during Weekends and National Holidays" inlineLabel="true"/>
    </div>
</div>

<aui:script>
AUI().ready('node', 'event', function(A){
    A.all("input[name=<portlet:namespace/>nationalholidays]").on('change', function() {
        var nationalholidaysType = A.one("input[name=<portlet:namespace/>nationalholidays]:checked").get("value");
        if(nationalholidaysType == "yes"){
            A.all('.running').show();
        }else{
            A.all('.running').hide();
        }
        });
   
    });
</aui:script>

No comments:

Post a Comment