SOLVED

How to toggle 2 fields in Forms 2.0

Go to solution
Grégoire_Miche2
Level 10

How to toggle 2 fields in Forms 2.0

Dear all,

I have 2 checkboxes in a form. I want that both cannot be checked together. So, when the 1st one is checked, I want that the second one to be unchecked immediately and vice-versa. (all this being visible to the visitor, not happening when the form is posted).

Any idea on how to do this ?

Thx in advance,

-Greg

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: How to toggle 2 fields in Forms 2.0

11 REPLIES 11
Stijn_Heijthuij
Level 7

Re: How to toggle 2 fields in Forms 2.0

Hi Gregoire,

As far as I know there's no way to manipulate the values of fields in Forms2.0

Based on my experience, the best bet you'll have it to add some Javascript code to check/uncheck based on either of the fields.

Priyank_Joshi3
Level 6

Re: How to toggle 2 fields in Forms 2.0

Hi Gregoire,

Check boxes, by design, are meant to be toggled on or off. They are not dependent on other checkboxes, so you can turn as many on and off as you wish.

Radio buttons, however, are designed to only allow one element of a group to be selected at any time. I would suggest using radio buttons instead.

Thanks
Priyank

SanfordWhiteman
Level 10 - Community Moderator

Re: How to toggle 2 fields in Forms 2.0

I agree with Priyank that a radio button set is commonly -- though not always -- considered semantically appropriate when you want mutually exclusive selections.

Radios are meant to result in a single value stored to a single field on the back end.

Checkboxes may result in a single value on a single field, or a single value posted to one of several fields (with the other fields left at boolean false/off).

These are different use cases, and form builder limitations are another consideration. Marketo does not let you natively use radio buttons across multiple back-end fields. However, I recently posted a Forms 2.0 recipe to present independent checkboxes *as if* they were radios. Search the Community and you'll find it.

Grégoire_Miche2
Level 10

Re: How to toggle 2 fields in Forms 2.0

I need checkboxes, not radio buttons, since it can be a one to many relationship, such as in a subscription center.

SanfordWhiteman
Level 10 - Community Moderator

Re: How to toggle 2 fields in Forms 2.0

Grégoire_Miche2
Level 10

Re: How to toggle 2 fields in Forms 2.0

Thx a lot Sanford,

Just a quick question : how do I customize the line

var mutexSelectors = '#VIP__c,  #ContactReq__c';

If I have checkbox1__c, checkbox2__c and checkbox3__c that all need to be mutually exclusive to unsubscribed field

-Greg

SanfordWhiteman
Level 10 - Community Moderator

Re: How to toggle 2 fields in Forms 2.0

It's a CSS selector list, so if those are IDs:

     #id1, #id2, #id3

You can even make more complex groups, like

     ,myName, #myId, #myFieldset input[type=checkbox]

Grégoire_Miche2
Level 10

Re: How to toggle 2 fields in Forms 2.0

Hi again Sanford Whiteman ,

I gather that it makes all the fields mutually exclusive, meaning that only 1 can be selected at any time.

What I need if more :

1 group :

Suscribe to :

  • Product news
  • Event invite
  • Blog posts


  • Unsuscribe from every email

When the visitors checks the last one, the 3 first are unchecked

When the visitor clicks any of the 3 first, the last one is unchecked

-Greg

Grégoire_Miche2
Level 10

Re: How to toggle 2 fields in Forms 2.0

Hi again,

I gather that a code like this would work :

MktoForms2.whenReady(function(form) {

     // array of independent checkbox fields to be considered a mutually exclusive set

     var mutexSelectors1 = '#field1__c,  #field2__c, #field3__c', mutexSelectors2 = '#unsubscribed' ;

     var formEl = form.getFormElem()[0],

          mutexElements1 = formEl.querySelectorAll(mutexSelectors1),

            mutexElements2 = formEl.querySelectorAll(mutexSelectors2);

     Array.prototype.forEach.call(mutexElements1, function(el) {

          el.addEventListener('click', function(e) {

               var clickedEl = this;

               Array.prototype.forEach.call(mutexElements2, function(el) {

                    if ( el !== clickedEl ) el.checked = false;

               });

          });

     });

     Array.prototype.forEach.call(mutexElements2, function(el) {

          el.addEventListener('click', function(e) {

               var clickedEl = this;

               Array.prototype.forEach.call(mutexElements1, function(el) {

                    if ( el !== clickedEl ) el.checked = false;

               });

         });

     });

});

But may be it's not optimized (I am not a Javascript specialist)

-Greg