Jump to content
  • 0

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


kdezign7
 Share

Question

 

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

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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

 

image.png.7fc900b27bfc7a4d56fcac3615850242.png

 

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

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

 

image.png.6015224292c0d1f4941d8f898c2f9e1d.png

 

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)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...