Unanswered

Show/Hide fields based on a Yes/No field selection with javascript

(0) Share

Report

Posted on by DylanR

Hi community, thanks for the great support you all provide.

Could you please assist with a sample of how to show/hide based on a Yes/No field selection? Here is my sample I've been trying in various ways without success.

$(document).ready(function () {
 $("#myYesNoField").change(onChangeEvent);
 onChangeEvent();
});

function onChangeEvent() {
 var varChange = $('#myYesNoField').val();
 
 if (varChange == 1) {
 
 $('#myFieldName').parent().parent().show();
 }
 else {
 $('#myFieldName').parent().parent().hide();
 }
}

Thanks so much in advance!!

Categories:

Power Apps portals

I have the same question (0)

All responses (8)

Answers (0)

OOlashyn 3,496 Most Valuable Professional on at

Like (0)

Report

Hi @DylanR,

Check this article from @OliverRodrigues on how to show hide fields with code.

Was this reply helpful? Yes No
DylanR 50 on at

Like (0)

Report
Hi @OOlashyn
Thanks so much for the feedback. I had previously seen the post from @OliverRodrigues but couldn't get the script to work.

My challenge is not the show / hide part (as I'm doing this already for other fields). My issue is triggering the script when the Yes/No field value is changed.

This is the part of the script that doesn't seem to be correct.
function onChangeEvent() { var varChange = $('#myYesNoField').val(); if (varChange == 1)

I've tried changing if (varChange == 1) to if (varChange == true) or if (varChange === "Yes") and none of them work.

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

Like (0)

Report
hi @DylanR instead of using:

$("#myYesNoField").change(onChangeEvent);

can you try?:

$("#myYesNoField").on("change", onChangeEvent);

Was this reply helpful? Yes No
DylanR 50 on at

Like (0)

Report
Thank you @OliverRodrigues for your suggestion.
I have tried what you suggested (and many other variations) without success. The event does not trigger when the TwoOption field changes its value.

Here is the actual code I've tried which isn't working. I would really appreciate if you could edit as needed.
Many thanks!

$(document).ready(function () { onChangeEvent(); $('#new_accountregulated').on("change", onChangeEvent); }); function onChangeEvent() { var varChange = $('#new_accountregulated').val(); if (varChange == 1) { $('#new_regulatedby').closest("td").find("div.control, div.info").show(); } else { $('#new_regulatedby').closest("td").find("div.control, div.info").hide(); } }

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

Like (0)

Report

can you add a snapshot of your form? how are you rendering your Yes/No?

if it via Radio Buttons? dropdown? checkbox?

Was this reply helpful? Yes No
DylanR 50 on at

Like (0)

Report

It's Radio Buttons @OliverRodrigues

Should I try a different format?

Was this reply helpful? Yes No
DylanR 50 on at

Like (0)

Report

Hi again, I changed the format to dropdown list and it now works.

Neither checkbox or radio button works, which doesn't make sense. Thanks for your assistance.

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

Like (0)

Report
Hi, if you are using radio buttons, probably the issue is when reading the value of the field

try something like:

var selectedValue = $("#<COLUMN>").find("input[type='radio']:checked").val();

Was this reply helpful? Yes No