Hide field on Submission form

[Vitalikssssss]

Hi All,

I have a problem with one of my Submission form.

I need to conditionally hide a field if the user checks the checkbox field (Virtual). 

I have tried to achieve this functionality with standard Caspio feature call "Rules", however, it doesn`t save the value if the field is hidden with "Rule".

Forgot to mention the field receive an auth parameter on load. 

Can someone share with me a pure JS solution for hiding fields conditionally? 

Thanks,

vitalikssssss

 

[Hastur]

@Vitalikssssss

It is possible to implement this workflow using additional JS.

Please find the application with the same feature implemented - test.ziptest.ziptest.zip

Please note that you should disable HTML editor before you insert the code.
Here are the snippets of code you should insert into your datapage:

Header:

<style>

.cbHTMLBlockContainer {
 padding: 0 !important;
}

</style>

HTML Block under the field you want to hide:

<table style="margin: 0; padding: 0;" id="ruleDiv">

HTML Block below the field you want to hide:

</table>

Footer:

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {

 let hide =  document.getElementById('ruleDiv')
 let checkId = 'cbParamVirtual1';

 document.getElementById(checkId).addEventListener('change', function (event) {
  if (event.target.value == "Y") {
   event.target.value = "N";
   hide.style.display = "none";
  } else if (event.target.value == "N") {
   event.target.value = "Y";
   hide.style.display = "";
  }
 });
});
</script>

 

You need to define the ID of your checkbox you want to use as a condition to define rule:
let checkId = 'cbParamVirtual1';

[DesiLogi]

I think the issue is the same one I'd had myself: if a rule hides a field after data has been put into it then the data is not saved (forgive me if this isn't what you're asking for). 

Here's the code for the onChange of the check box that updates the field. I don't think the BeforeSubmit is necessary: 

$("[name='cbParamVirtual21']").change(function(){  
  f_copy_print_address('cbParamVirtual24', 'cke_EditRecordItems_ShipAddress');
  var v2 = document.getElementsByName("cbParamVirtual24")[0].value;
  document.getElementById('EditRecordItems_ShipAddress').innerHTML = v2;
 
});

 

 

 

[Kronos]

Hi everyone,  sharing this Howto article in case it might help others:

Hiding Fields in DataPages

Cheers!