Question

How do I save radio button custom formatting when form is saved?

Forms

Updated March 14, 2019

asked on February 19, 2019

I have created a form with custom formatting for the radio buttons. If a user clicks Yes, No, NA, or Other the font changes color of only the selected button. BUT when the form is saved or emailed, the formatting is lost and does not appear on the final form.

Can anyone help me to get this formatting to save?

This is what the form looks like on the screen:

Here is what it looks like after submission:

Here is my code:

.sidebyside {display: inline-block;
  width: 50%;}

input[type=radio]:checked ~ label{
  /*color: #000000 !important;*/
  font-size: 18px !important;
  font-weight: bold !important;
}

input[type="radio"]:not(:checked) ~ label {
  height: 10px !important;
  width: 10px !important;
  color: #000000 !important;
  background-color: #FCFCFC !important;
    /*width: 50%;*/
  }

$(document).ready(function() {
  $('.radio').on('click', function(e) {
    if (e.target.value == 'Yes') {
    	
      /*$(this).find(":checked ~ label").css('background-color', '#FCFCFC');*/
      $(this).find(":checked ~ label").css('color', 'green');
    }
    else if (e.target.value == 'No') {
      /*$(this).find(":checked ~ label").css('background-color', '#FCFCFC');*/
      $(this).find(":checked ~ label").css('color', '#FB5944');
    }
    else if (e.target.value == 'NA') {
    	/*$(this).find(":checked ~ label").css('background-color', '#FCFCFC');*/
      $(this).find(":checked ~ label").css('color', '#FFC133');
    }
    else if (e.target.value !== 'Yes' || e.target.value !== 'No' || e.target.value !== 'N/A') {
    	$(this).find(":checked ~ label").css('background-color', '#FCFCFC');
    }
  });
});

1 0

Answer

SELECTED ANSWER

replied on March 14, 2019

I figured it out!!!

.radio input[value="Yes"]:checked + label {
  background-color: #58F952;
  color:white;}
.radio input[value="No"]:checked + label {
  background-color: #FB5944;
  color:white;}
.radio input[value="N/A"]:checked + label {
  background-color: #FFFF89;
  color:black;}
.radio input[value="Other"]:checked + label {
  background-color: #FCFCFC;
  color:black;}

2 0

Replies

replied on February 19, 2019

It looks like my second screenshot didn't make it:

Here is what it looks like after submission:ion:

0 0

replied on February 20, 2019

You should be able to do this without javascript, and then you will not have to worry about having the javascript fire during image generation. There may be a better way but this works for us.

Here is some css for something similar we do, you can adapt it.

.rating .choice input[type="radio"][id*="-2"]:checked + label {
  background: grey;
  border-color: yellow;
  color: white;
}

.rating .choice input[type="radio"][id*="-3"]:checked + label {
  background: red;
  color: white;

}

0 0

replied on February 22, 2019

Do you have a screenshot of the radio buttons and what this output looks like?

0 0

replied on February 22, 2019

I have (on my real form, this one is a test) about 100 questions. Would this require each ID number to be put in and each radio button to be coded separately?

0 0

You are not allowed to follow up in this post.

Question

Question

How do I save radio button custom formatting when form is saved?

Answer

Replies

Sign in to reply to this post.