KateG
Canvas Initiate

Button to untick choice selections stops working after save

I’ve set up a form with various choice fields and have put in buttons that allow the user to untick their selection, leaving the field blank (following advice on other posts, thank you). This all works very well.

 

The form is a long one and users are able to save and return to it later, before pressing submit and it flowing through an approver workflow.

 

We’ve found that if the user changes their mind and unticks immediately, there is no problem. However, if the user saves, and then returns to the form later and wants to untick, the button has stopped working. Just to be clear, after saving, other areas on the form can still be edited – it is just the untick button that has stopped working.

 

The code in the button is as follows, where Option = name of the choice field and varOption = a JS variable name given to that field:

NWF$('document').ready(function(){var strOption = NWF$('#'+varOption).find("input:checked").val();NWF$('#'+varOption).find('input[value=\''+strOption+'\']').attr('checked', false);});

0 Kudos
Reply
9 Replies
MegaJerk
Automation Master
Automation Master

Re: Button to untick choice selections stops working after save

It's only working some of the times likely because you're setting it as an attribute rather than a property. 

//BAD: uses '.attr()' 
NWF$("document").ready(function() {
  var strOption = NWF$("#" + varOption).find("input:checked").val();
  NWF$("#" + varOption).find("input[value='" + strOption + "']").attr("checked", false);
});

//GOOD: uses '.prop()'
NWF$("document").ready(function() {
  var strOption = NWF$("#" + varOption).find("input:checked").val();
  NWF$("#" + varOption).find("input[value='" + strOption + "']").prop("checked", false);
});


If you're interested in why this is the case I have a more in depth response in a different thread over here: Issue Updating Form Controls with JavaScript 

(EDIT: I have updated the code to reflect your posted code, as opposed to using code from the linked example)

0 Kudos
Reply
KateG
Canvas Initiate

Re: Button to untick choice selections stops working after save

Thank you very much for the answer and link (and for using my code).

 

I've changed "attr" to "prop" in the button code - I think that is the only difference. Unfortunately it still isn't working. However I had to go with it and so am now reluctant to do too much while the form is in use!

0 Kudos
Reply
MegaJerk
Automation Master
Automation Master

Re: Button to untick choice selections stops working after save

Perhaps something is missing. Can you provide a screenshot of the portion of the form in question? 

Additionally, are you saying that when you Save the Form (without it redirecting you to the List) that any subsequent attempts to use this 'clear selection' button will not work? 


0 Kudos
Reply
KateG
Canvas Initiate

Re: Button to untick choice selections stops working after save

Thanks!

Here is the form - it is not efficient, but I've an untick for each choice.

Buttons (2).png

 

Then this is the button:Button code.png

 

Yes, once you either save and continue or save and close, the untick stops working. But before saving it is working perfectly.

 

 

 

 

 

 

0 Kudos
Reply
MegaJerk
Automation Master
Automation Master

Re: Button to untick choice selections stops working after save

Are the Choices (like, "Discussed in induction") individual Choice Controls, or is it just one Choice Control with several Options? 

If they are individual Choice Controls, is there a particular aversion to just using a Yes / No control that could be changed at any time to be either considered 'on' or 'off' (Checked / Unchecked)? 

Further, are you Button Controls set to type JavaScript? 
image.png

0 Kudos
Reply
eharris04
Workflow Hero

Re: Button to untick choice selections stops working after save

@KateG I'm not 100% why you're using radial buttons, but that may be difficult to do and require code. Have you thought of using checkboxes that allow for unchecking? Also you an use this as a multiple-choice column since more than one option is allowed and if you need you could have one untick option that clears them all. 

 

0 Kudos
Reply
MegaJerk
Automation Master
Automation Master

Re: Button to untick choice selections stops working after save

I did a mock-up of what I believe to be how your form is setup, but this might not work if I didn't guess correctly. 

image.png

In this example I'll be using (3) Choice Controls and (3) Buttons. All of the aforementioned controls will be independent, and will have their own individual Names. 

The Naming Scheme for the Choice Controls will be "myChoice_1", "myChoice_2", and "myChoice_3". Below is an example of how each control should be configured (though each should be named using one of the names above, respectively): 
image.png

 

The Buttons will follow a similar pattern being named "myButton_1", "myButton_2", and "myButton_3". The Button type will be JavaScript. Below is an image showing you the configuration of myButton_1: 
image.png

 

You may notice that the 'Client Click' portion of the Button Settings is populated with some code. 

Because you are using several individual controls, you will need to populate EACH BUTTON with a slightly different block of code so that it toggles only ONE of the Choice Controls. 

Assuming  you have named all of the Choice Controls correctly, you can copy and paste the following code snippets into the Client Click input of the corresponding Button. 

myButton_1's Client Click Code: 

(function(controlName) {
  event.preventDefault();
  NWF$("[data-controlname='" + controlName + "'] .nf-associated-control").find(":checked").prop("checked", false);
}("myChoice_1"));

myButton_2's Client Click Code:

(function(controlName) {
  event.preventDefault();
  NWF$("[data-controlname='" + controlName + "'] .nf-associated-control").find(":checked").prop("checked", false);
}("myChoice_2"));

myButton_3's Client Click Code:

(function(controlName) {
  event.preventDefault();
  NWF$("[data-controlname='" + controlName + "'] .nf-associated-control").find(":checked").prop("checked", false);
}("myChoice_3"));

The resulting Form should result in Buttons that will allow you to Uncheck the Control that you Named in the Client Click Code, and removes the need to use Event Handling: 

image.png

-----------------

 

All that being said, it would still probably be wise to change your fields to something like a Yes / No Control which has all of this essentially baked into the behavior of the Control. Using Radio Buttons in combo with an Untick button is not typical / expected behavior, but if there is some reason that prevents you from making the switch, the above should let you accomplish what you're trying to do without breaking anything. 

Hope you're able to get things up and running. 


 

Reply
KateG
Canvas Initiate

Re: Button to untick choice selections stops working after save

Thank you so much for all this effort.

 

Naturally there is a bit of a story! In short, there are eight individual forms which we need combined into one overall form for approval. This is achieved by a workflow copying the data from each form each time it is saved into the overall form. For some reason which remains baffling, when we used checkboxes allowing multiple selections, these multiple selections didn't copy across, hence the change to individual radio buttons for each option which copy fine (we found that in other multiple choice questions where only one answer is acceptable, radio buttons are used and copy fine). However, this led to the problem of not being able to untick, hence the button for each option.

 

However the idea of a yes/no toggle sounds like a really good (and far more simple) solution to try next year!

0 Kudos
Reply
MegaJerk
Automation Master
Automation Master

Re: Button to untick choice selections stops working after save

Well it's good to hear that it might save you all some headache in the future! 

Hopefully my code solution will work for the now-time. 



0 Kudos
Reply