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

(0) Share

Report

Posted on by Community Power Pla...

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

Categories:

Power Apps portals

I have the same question (0)

All responses (12)

Answers (1)

oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report

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.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report
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 🙂

Was this reply helpful? Yes No
oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report

Hi, yes, that code should work

have you tried ?

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Yes but doesn't seem to be working 😞

any ideas what i could be doing wrong?

Was this reply helpful? Yes No
oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report
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") {

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report
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 😞

am i using the correct code for the toggle?

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

Many Thanks for you help 🙂

Was this reply helpful? Yes No
oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report
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

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

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

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?

Was this reply helpful? Yes No
oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report
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'));

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report
Ahh ok cool i did think if i was using the wrong type on control 🙂

sorry still a bit confused where would i put the new bit of code? do i need to replace something?

var selectedValue = GetRadioSelectedValue($('#callingonbehalfof'))
i really very new to Javascript &colon;) like days new lol

Many Thanks

Was this reply helpful? Yes No