Question

select one radio field only

Forms

Updated July 8, 2019

asked on July 5, 2019 • Show version history

We are creating a form where people can vote on a logo. The preferred visual on the form has the image of the logo and a button under it to choose it if it is the preferred choice. There are four logos.

I used an HTML field to display the logo, followed by a button field with only one option. This is repeated for each logo.

How do I limit the number of items selected to one?

Here is a portion of the logo followed by the button field.

The HTML field and the button field are repeated for each logo. Each button field is its own entity.

0 0

Replies

replied on July 5, 2019 • Show version history

That's not really how radio buttons are designed to work. Behind-the-scenes, HTML treats radio buttons as a group of related objects and the user can't deselect a radio, they can only select a different one from the group.

Additionally, using JavaScript to change the state of a radio button doesn't always work as you might expect. The "change" events can fire at different times depending on the browsers, so it can be a huge pain to try and get it to deselect one field when another is changed.

My recommendation would be to take a different approach. Instead of trying to get separate radio buttons to behave as a single group, use CSS to space out the options for a single field and make room to display your logos above each option.

Use a single column setting for the radio buttons
Figure out how much space you need between each one to fit your images
Set CSS to create the spacing between them
Build your Custom HTML in a similar way
Use negative margins to overlay the radio button fields on top of your custom HTML

0 0

replied on July 8, 2019 • Show version history

Have you tried something like this using CSS:

Create your radio button with the number of logos you are going to be voting on then use the following code replacing #Field9 with whatever field number your radio button is and altering the height and width to whatever you need for sizes:

01#Field9-0 + label {
02    background-image: url(YOUR URL HERE TO LOGO 1);
03    background-size: 100% 100% !important;
04    background-repeat: no-repeat;
05    height: 80px !important;
06    width: 20% !important;
07    display: inline-block;
08      color:white;
09}
10 
11#Field9-1 + label {
12    background-image: url(YOUR URL HERE TO LOGO 2);
13    background-size: 100% 100% !important;
14    background-repeat: no-repeat;
15    height: 100px !important;
16    width: 100px !important;
17    display: inline-block;
18      color:white;
19}
20 
21 
22#Field9-2 + label {
23    background-image: url(YOUR URL HERE TO LOGO 3);
24    background-size: 100% 100% !important;
25    background-repeat: no-repeat;
26    height: 80px !important;
27    width: 80% !important;
28    display: inline-block;
29      color:white;
30}

0 0

You are not allowed to follow up in this post.

Question

Question

select one radio field only

Replies

Sign in to reply to this post.