Page 1 of 1

Open popup based on radio option

Posted: Wed Sep 17, 2014 8:43 am
by Hawk

I have radio of two options. I want to display one of three popups based on the option chosen (either one or none is chosen). The popups should show after the user click button (submit). So I've added the JS on blick:

code

var rad1 = Boolean(Apperyio('mobileradiobutton_295').find("input").val());
var rad2 = Boolean(Apperyio('mobileradiobutton_296').find("input").val());
var checkedValue1 = Apperyio("mobileradiobutton_295").find('input[type="radio"]:checked').val();
var checkedValue2 = Apperyio("mobileradiobutton_296").find('input[type="radio"]:checked').val();
if(checkedValue1 == "rad1"){
Apperyio("mobilepopup_298").popup("open");
}
else if(checkedValue2 == "rad2" ){
Apperyio("mobilepopup_399").popup("open");
}
else {
Apperyio("mobilepopup_300").popup("open");
};
/code

However, it always shows the last option (else)!


Open popup based on radio option

Posted: Wed Sep 17, 2014 10:35 am
by Kateryna Grynko

Hi Hawk,

Please try this solution:
prevar checkedRadio = Apperyio('MOBILE_RADIO_GROUP').find('input:radio:checked').val();

switch ( checkedRadio ) {
case 'rad1':
Apperyio("mobilepopup_298").popup("open");
break;
case 'rad2':
Apperyio("mobilepopup_399").popup("open");
break;
default: Apperyio("mobilepopup_300").popup("open");
}/preWhere MOBILE_RADIO_GROUP is your radio button group name.


Open popup based on radio option

Posted: Wed Sep 17, 2014 10:48 am
by Hawk

Hi Katya,

I used your script as follows:

code
var rad1 = Boolean(Apperyio('mobileradiobutton_295').find("input").val());
var rad2 = Boolean(Apperyio('mobileradiobutton_296').find("input").val());
var checkedRadio = Apperyio('mobileradiogroup_294').find('input:radio:checked').val();
switch ( checkedRadio ) {
case 'rad1':
Apperyio("mobilepopup_298").popup("open");
break;
case 'rad2':
Apperyio("mobilepopup_299").popup("open");
break;
default: Apperyio("mobilepopup_300").popup("open");
}
/code

It's still showing only the default case regardless the chosen options!!

To reproduce the problem:
link: http://appery.io/app/mobile-frame?src...

login credentials: haytham/star1234

Navigate: NavBar - earn points - Mevius - Mevius Airstream - radio options

Thanks for your help


Open popup based on radio option

Posted: Wed Sep 17, 2014 11:32 am
by Kateryna Grynko

Hi Hawk,

Now we can see that your buttons have different values, not just 'rad1' and 'rad2'. Also you shouldn't convert values to boolean.

Your switch statement should compare selected value to the radio buttons values as follows:
prevar rad1 = Apperyio('mobileradiobutton_295').find("input").val();
var rad2 = Apperyio('mobileradiobutton_296').find("input").val();
var checkedRadio = Apperyio('mobileradiogroup_294').find('input:radio:checked').val();
switch ( checkedRadio ) {
case rad1: Apperyio("mobilepopup_298").popup("open");
break;
case rad2: Apperyio("mobilepopup_299").popup("open");
break;
default: Apperyio("mobilepopup_300").popup("open");
}/pre


Open popup based on radio option

Posted: Thu Sep 18, 2014 1:29 am
by Hawk

Thanks Katya for the explanation!


Open popup based on radio option

Posted: Wed Oct 15, 2014 6:33 pm
by Calvin Cox

Hi Katya, I've tried implementing the above code and it seems to work on the computer using on click event to run my js. But when I tried it on my phone the popup doesn't work. Not sure what I'm doing wrong.

Any help would be greatly appreciated

Thanks.


Open popup based on radio option

Posted: Wed Oct 15, 2014 6:59 pm
by Evgene Karachevtsev

Hello Calvin,

You should use not a click, but value change event of your radio buttons group


Open popup based on radio option

Posted: Wed Oct 15, 2014 7:37 pm
by Calvin Cox

Thanks Evgene. That worked.