Skip to main content

Hi all,

We've all seen forms around the internet where you have to explicitly click a check box to say you've read and understood the terms and conditions and it won't let you continue until you do....

Basically, I want to do the same on my (Responsive) form.

I have a checkbox (not connected to any backing field) which is used in a Rule for the Submit button... the rule only seems to allow one of two ways to work:- 

Option 1. I can  disable the button ignoring any clicking on it   .. however the button has no "state" differentiation and still shows the same as if it was enabled... users will wonder "Why doesn't this button work"

Option 2. I can hide the button but then the users will ponder "How on earth do I save this form"

Neither of which provide a look and feel that I am happy with.... Ideally, I want option 1 but I want the button to go "dim" to show that its not clickable and then they can scan the form to check they've done all they should.

Any suggestions welcome please.

Thanks.

Being that you're using Responsive Forms, it's more difficult to provide any type of solution that will stand the test of time because Nintex has chosen to no longer support easy css / javascript changes. So, while I can provide a solution that works now, there is no telling if it will continue to work as I am not familiar with how they plan on changing things in the future (especially with Universal Forms / Rules around the corner). 

So, if you upgrade, make sure that you TEST the Form before committing to it.

Now that we have that out of the way... 

Here's the Form Controls in question:

219201_pastedImage_1.png

Here are the settings on the Yes/No Control: 

219202_pastedImage_2.png

Now... Select the 'Save' Button and create a New Rule button in the Ribbon at the top of your screen:

219203_pastedImage_3.png

The Rule Editor should open up from the Right Side of your screen. I have mine configured as seen:

219204_pastedImage_4.png

The Copy / Paste javascript is: 

(function(formControlCall, checkBox, opacityValue){
  "use strict";
  var formControlID = formControlCall.split("'")>1] || "";
  var targetControl = sourceContext.find(">formcontrolid='" + formControlID + "'].nf-filler-control");
  var internalElement = targetControl.find("nformcontrolid]oid]");
  internalElement.css({opacity: ((checkBox) ? 1 : opacityValue)});
  return !checkBox;
}("{Control:Self}", {someCheckbox}, .25));‍‍‍‍‍‍‍‍

Please Note: You will need to replace the bottom value {someCheckbox} with the Named Reference that shows in Red:

219206_pastedImage_6.png

Resulting in the following looking reference in your formula.

219205_pastedImage_5.png

Previewing the Form, you can see it with the checkbox left unchecked:

219207_pastedImage_7.png

and Checked:

219208_pastedImage_8.png

I hope that this helps. If you want to change the opacity, you can just change the numeric value that is in the 3rd argument position (which I have set to .25 initially). Opacity only ranges from 0 (fully invisible) to 1 (fully visible), so you can change the range 0, .01, .02....~1.00 

Wow ... that's some reply ... I will give that a try ... I didn't know you could by JS in the "when" section but I can totally see what's going on..

Very elaborate solution...

If you're interested in learning more about the subject, I have written a detailed guide on how to utilize JavaScript inside of the Rule System here:  


It's an incredibly helpful thing to know in situations such as this!

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings