cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper I
Helper I

Show/Hide Section based on Yes/No toggle - JavaScript

Hi All, 

 

I have a webform with two sections, one with a toggle Yes/No and in the other section i have a 5 fields 

 

i want to hide the section when the toggle is at default "No" and show the section when the switched to "Yes", 

 

the form is hiding at default but not showing when i switch to yes 

 

what am i missing in the code below??

 

$(document).ready(function () {
debugger;
onDisplaySectionChange();
showHideFieldsandTab();

});

function showHideFieldsandTab() {
$("#callingonbehalfof").change(onDisplaySectionChange);
}

function onDisplaySectionChange() {
if ($("#callingonbehalfof").val() != "Yes") {
$(".section[data-name='Your_Information']").closest("fieldset").show();
$(".section[data-name='Your_Information']").closest('fieldset').find("input[type=text], textarea").val("");
$(".section[data-name='Your_Information']").closest('fieldset').find("select").val('selected');
}
else {
$(".section[data-name='Your_Information']").closest("fieldset").hide();
};

 

Any help would be great 

 

Many thanks 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Super User II
Super User II

Re: Show/Hide Section based on Yes/No toggle - JavaScript

Hi

try the following:

$(document).ready(function () {
    debugger;
    onDisplaySectionChange();
    showHideFieldsandTab();

});

function showHideFieldsandTab() {
    $("#iii_callingonbehalfof").change(onDisplaySectionChange);
}

function onDisplaySectionChange() {
    var selectedValue = GetRadioSelectedValue($('#iii_callingonbehalfof'));
    if (selectedValue != "1") {
        $("table[data-name='Your_Information']").parent().show(); /// and .hide();
    }
    else {
        $("table[data-name='Your_Information']").parent().hide(); /// and .hide();;
    }
}

GetRadioSelectedValue = function(input) {

    if (!!$(input).find("input[type=radio]")) {
        var controlName = $(input).find("input[type=radio]").first().attr("name");
        if (!!controlName) {
            return $("input[name='" + controlName + "']:checked").val();
        }
    }
    return "";
};



If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

12 REPLIES 12
Highlighted
Super User II
Super User II

Re: Show/Hide Section based on Yes/No toggle - JavaScript

Hi

 

can you try the following to hide/show your section: 

$("table[data-name='Your_Information']").parent().show(); /// and .hide();
 
also in your code is missing a final "}".. but I believe it was just a copy/paste mistake
 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Highlighted
Helper I
Helper I

Re: Show/Hide Section based on Yes/No toggle - JavaScript

Hi @OliverRodrigues, many thanks for your reply

 

Do you mean replace in the if statement? like below?

 

$(document).ready(function () {
debugger;
onDisplaySectionChange();
showHideFieldsandTab();

});

function showHideFieldsandTab() {
$("#iii_callingonbehalfof").change(onDisplaySectionChange);
}

function onDisplaySectionChange() {
if ($("#iii_callingonbehalfof").val() != "Yes") {
$("table[data-name='Your_Information']").parent().show(); /// and .hide();
}
else {
$("table[data-name='Your_Information']").parent().hide(); /// and .hide();;
}}

 

Sorry i am very new to java and still learning slowly 🙂

 

Highlighted
Super User II
Super User II

Re: Show/Hide Section based on Yes/No toggle - JavaScript

Hi, yes, that code should work

 

have you tried ? 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Highlighted
Helper I
Helper I

Re: Show/Hide Section based on Yes/No toggle - JavaScript

Yes but doesn't seem to be working 😞

 

any ideas what i could be doing wrong? 

Highlighted
Super User II
Super User II

Re: Show/Hide Section based on Yes/No toggle - JavaScript

maybe this line you are getting it wrong:

if ($("#iii_callingonbehalfof").val() != "Yes") {

you should have the optionset value there, not the label.. something like:

if ($("#iii_callingonbehalfof").val() != "993480000") {

 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Highlighted
Helper I
Helper I

Re: Show/Hide Section based on Yes/No toggle - JavaScript

Morning @OliverRodrigues 

 

Iv have tried the code below 

 

$(document).ready(function () {
debugger;
onDisplaySectionChange();
showHideFieldsandTab();

});

function showHideFieldsandTab() {
$("#iii_callingonbehalfof").change(onDisplaySectionChange);
}

function onDisplaySectionChange() {
if ($("#iii_callingonbehalfof").val() != "993480000") {
$("table[data-name='Your_Information']").parent().hide(); /// and .hide();;

}
else {
$("table[data-name='Your_Information']").parent().show(); /// and .hide();;
}}

 

the section is hidden but the toggle doesn't work 😞

 

MartinPAChamp_0-1594282329504.png

MartinPAChamp_1-1594282348007.png

am i using the correct code for the toggle? 

 

if ($("#iii_callingonbehalfof").val() != "993480000")

 

Many Thanks for you help 🙂

Highlighted
Super User II
Super User II

Re: Show/Hide Section based on Yes/No toggle - JavaScript

the value "993480000" was just an example

 

you need to know the value for your optionset, you can discover that through a few different ways:

 

  • navigate to the solutions which you created the optionset, go to the field properties and click on the option set option you need, and check the value
  • (sort of cheating but maybe easier) just inspect the optionset element directly in your page and you will be able to see the values

optionset.PNG




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Highlighted
Helper I
Helper I

Re: Show/Hide Section based on Yes/No toggle - JavaScript

Ahh ok cool still very new to me so i found the value set as "1"

 

MartinPAChamp_0-1594285127621.png

 

So i have changed the code 

 

$(document).ready(function () {
debugger;
onDisplaySectionChange();
showHideFieldsandTab();

});

function showHideFieldsandTab() {
$("#iii_callingonbehalfof").change(onDisplaySectionChange);
}

function onDisplaySectionChange() {
if ($("#iii_callingonbehalfof").val() != "1") {
$("table[data-name='Your_Information']").parent().show(); /// and .hide();;

}
else {
$("table[data-name='Your_Information']").parent().hide(); /// and .hide();;
}}

 

also just to double check am i putting the code in correct area? 

 

MartinPAChamp_1-1594285337567.png

 

Highlighted
Super User II
Super User II

Re: Show/Hide Section based on Yes/No toggle - JavaScript

My bad, I didn't pay attention you were actually using a radio button instead of normal dropdownlist 

(I might need a few more coffees to start the day here hahahahaha)

and yes, the place you are adding your code is correct

 

I have a generic function to get value for retrieving radio values:

GetRadioSelectedValue = function(input) {

    if (!!$(input).find("input[type=radio]")) {
        var controlName = $(input).find("input[type=radio]").first().attr("name");
        if (!!controlName) {
            return $("input[name='" + controlName + "']:checked").val();
        }
    }
    return "";
};

 to use the function you can do the following:

var selectedValue = GetRadioSelectedValue($('#callingonbehalfof'));



If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Tech Marathon

Maratón de Soluciones de Negocio Microsoft

Una semana de contenido con +100 sesiones educativas, consultorios, +10 workshops Premium, Hackaton, EXPO, Networking Hall y mucho más!

Users online (7,553)