Jump to content

Hide field on Submission form


Recommended Posts

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

 

Link to comment
Share on other sites

@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';

Link to comment
Share on other sites

  • 1 year later...

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;
 
});

 

 

 

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
Reply to this topic...

×   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...