Javascript hides section in Form by yes or no column but now I want to add a second

(1) Share

Report

Posted on by Robin1988

249

Hello devs,

I have less experience with Javascript. Can someone help me out? Because I don't now how to achieve a second yes or no colomn and hide section part. I can but then the first stops working:)

This works good:

$(document).ready(function() {
console.log(555, "JS-hiding elements");
$(".tab-title").hide();
});

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

});

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

function onDisplaySectionChange() {
 var selectedValue = GetRadioSelectedValue($('#bij_factuuradresanders'));
 if (selectedValue != "0") {
 $("table[data-name='tab_2_section_4']").parent().show(); /// and .hide();
 }
 else {
 $("table[data-name='tab_2_section_4']").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 "";
};

But now I want to add another, this one (if I paste below then only this one work):

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

function onDisplaySectionChange() {
 var selectedValue2 = GetRadioSelectedValue($('#bij_tweedereferentienummeropgeven'));
 if (selectedValue2 != "0") {
 $("table[data-name='tab_2_section_7']").parent().show(); /// and .hide();
 }
 else {
 $("table[data-name='tab_2_section_7']").parent().hide(); /// and .hide();;
 }
}

Thank you so much

Categories:

Design & build

All responses (5)

Answers (0)

Sort by

Manar 72 on at

Like
a
(1)

Report
Copy link

Link copied!
Hi,
If you want to hide 2 sections based on bij_factuuradresanders value, then i would recommend trying this

function showHideFieldsandTab() { $("#bij_factuuradresanders").change(onDisplaySectionChange); } function onDisplaySectionChange() { var selectedValue = GetRadioSelectedValue($('#bij_factuuradresanders')); if (selectedValue != "0") { $("table[data-name='tab_2_section_4']").closest('fieldset').show(); $("table[data-name='tab_2_section_7']").closest('fieldset').show(); } else { $("table[data-name='tab_2_section_4']").closest('fieldset').hide(); $("table[data-name='tab_2_section_7']").closest('fieldset').hide(); } }
Robin1988 249 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @Manar thank you for your reply. But they are two separate ones. So "#bij_factuuradresanders" has an section and further on in the form is "#bij_tweedereferentienummeropgeven" with its own section.
Manar 72 on at

Like
a
(0)

Report
Copy link

Link copied!
my bad, then you need to rename the new function (lets call it showHideFieldsandTab2) and call it onload. try that

function showHideFieldsandTab2() { $("#bij_tweedereferentienummeropgeven").change(onDisplaySectionChange); } function onDisplaySectionChange() { var selectedValue2 = GetRadioSelectedValue($('#bij_tweedereferentienummeropgeven')); if (selectedValue2 != "0") { $("table[data-name='tab_2_section_7']").parent().show(); /// and .hide(); } else { $("table[data-name='tab_2_section_7']").parent().hide(); /// and .hide();; } }

$(document).ready(function () { debugger; onDisplaySectionChange(); showHideFieldsandTab(); showHideFieldsandTab2(); });
Robin1988 249 on at

Like
a
(0)

Report
Copy link

Link copied!

Hello @Manar sorry to say but not working here. I'll try some more!
Robin1988 249 on at

Like
a
(0)

Report
Copy link

Link copied!
@Manar
We missed:
onDisplaySectionChange();

Thx for the help!

Now it's working (maybe it can be done much smarter but Ok):

$(document).ready(function () { debugger; onDisplaySectionChange(); onDisplaySectionChange2(); showHideFieldsandTab(); showHideFieldsandTab2(); }); function showHideFieldsandTab() { $("#bij_factuuradresanders").change(onDisplaySectionChange); } function showHideFieldsandTab2() { $("#bij_tweedereferentienummeropgeven").change(onDisplaySectionChange2); } function onDisplaySectionChange() { var selectedValue = GetRadioSelectedValue($('#bij_factuuradresanders')); if (selectedValue != "0") { $("table[data-name='tab_2_section_4']").parent().show(); /// and .hide(); } else { $("table[data-name='tab_2_section_4']").parent().hide(); /// and .hide();; } } function onDisplaySectionChange2() { var selectedValue2 = GetRadioSelectedValue($('#bij_tweedereferentienummeropgeven')); if (selectedValue2 != "0") { $("table[data-name='tab_2_section_7']").parent().show(); /// and .hide(); } else { $("table[data-name='tab_2_section_7']").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 ""; };