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!!

All responses (8)

Answers (0)

oliver.rodrigues 9,342 Most Valuable Professional on at

Like (0)

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

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();
DylanR 50 on at

Like (0)

Report

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

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.
DylanR 50 on at

Like (0)

Report

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

It's Radio Buttons @OliverRodrigues

Should I try a different format?
oliver.rodrigues 9,342 Most Valuable Professional on at

Like (0)

Report

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

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

if it via Radio Buttons? dropdown? checkbox?
DylanR 50 on at

Like (0)

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

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(); } }
oliver.rodrigues 9,342 Most Valuable Professional on at

Like (0)

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

hi @DylanR instead of using:

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

can you try?:

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

Like (0)

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

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.
OOlashyn 3,496 Most Valuable Professional on at

Like (0)

Report

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

Hi @DylanR,

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