Show and Hide Fields with Radio buttons in submission and details datapages

[kdezign7]

 

Hi,

 

Is it possible to modify this script to work with radio buttons. I created a datapage and certain fields need to show if a certain radio button is selected. This script looks like it would work but I don't have the skills in javascript to modify with Caspio  Radio buttons .

Help will be appreciated,

 

Thank you,

kdezign7

 

Hello @roattw,

Once the field is being hidden using rules and this specific field has default value, the value itself will not be stored inside the table once submitted since it is hidden and considered as non existing field. If you want to achieve your current workflow, you may need a JavaScript code that will hide a field based on a checkbox. If you are familiar with Javascript, you may use the code below, paste it in the Footer and play around with it: 

 

<script>
document.addEventListener("DataPageReady", function() {

field = document.querySelector('input[id^="InsertRecordName"]');
label = document.querySelector('label[for*="InsertRecordName"]');

if (document.getElementById("cbParamVirtual1").checked) {
field.style.display = "inline";
label.style.display = "inline";
}
else {
field.style.display = "none";
label.style.display = "none";
}

document.getElementById("cbParamVirtual1").onclick = function() {

if (document.getElementById("cbParamVirtual1").checked) {
field.style.display = "inline";
label.style.display = "inline";
}
else {
field.style.display = "none";
label.style.display = "none";
}}});
</script>

The code above will hide the field if the checkbox is not checked. You can modify the code and change the IDs assigned to it based on the ID of your field inside your DataPage.

I hope this works on you end.

Regards,
Barbie

[TellMeWhy]

First, you need to know the ID of the Radio Button, then you can use

 

document.querySelector("input[id^='cbParamVirtual2']:checked")

 

In my case, here's the id, you can use ctrl+shift+c if you're on windows and chrome

 

 

If it's a table field, it would look something like

document.querySelector("input[id^='InsertRecordTitle']:checked")

 

 

To use on a conditional script, you can just get the value, and use if else like
if(document.querySelector("input[id^='InsertRecordTitle']:checked").value == "A"){

//do stuff

}

 

you can store it in a variable first so it won't be so long inside the if else statement, or you can use it directly, depends on you. Note that only use the name of the field as ID (I didn't include the 0 in the InsertRecordTitle0 since it's been added for the Radio Button, the actual name is just Title, so, it will be InsertRecordTitle in the Form)