How to create 'prefer not to answer' checkbox beside free text fields | XM Community
Skip to main content

Hello,
I am currently creating a survey whereby we have a question asking for multiple types of numeric data (e.g. number of staff, average age, average tenure etc.) with text entry fields.
For each text entry field, I would like to also add a corresponding checkbox in the event the respondent prefers not to answer.

From other posts I know people have recommended using a multiple choice question type and for each radio button to allow text entry but I'm not sure this would completely work as I would like to have the checkbox text say: "prefer not to answer" but also for each text entry box to have a description for data required (e.g. number of staff, average age, average tenure etc.).

Does anyone have any suggestions to help?

Thanks.

If you want to have only one "Prefer not to answer" option for all the other options, then you can make prefer not to answer option "Mutually exclusive" using choice option.
But, if you want "Prefer not to answer" option for each option, then you need to create separate single choice questions for each options.

You can create side by side question like below,
image.pngand add the some custom css in addOnLoad function to format it in a better way , see below.
jQuery('.QuestionBody').find('thead').find('.Answers').css('display','none')
jQuery('.QuestionBody').find('thead').find('.Headings').css('display','none')
jQuery('.QuestionBody thead').find('tr').find('.BorderColor').css('border','none')
jQuery('.ChoiceStructure tbody').find('tr').find('.BorderColor').css('border','none')
jQuery('.SBS2').append(jQuery('.checkboxTxt').html()) // checkboxTxt class of prefer not answer
jQuery('.Choice').find('th').css('width','160px')
jQuery('.SBS1').css('width','180px')
jQuery('.SBS2').css('width','200px')

https://www.qualtrics.com/community/discussion/comment/27188#Comment_27188Thank you SurajK,

Is there an opportunity to make the 2 columns side by side without needing to use Java?

yes, you can remove that JS code and it will display like the below, also make sure to add the validation such that they can either enter the value in box or they can select the checkbox
image.png

https://www.qualtrics.com/community/discussion/comment/27193#Comment_27193Is there a way you could kindly attach a screenshot with the validation logic Suraj?

https://www.qualtrics.com/community/discussion/comment/27213#Comment_27213Try the below code to validate,
jQuery("#NextButton").hide();
jQuery("#Buttons").append("")
var qid = this.questionId;


jQuery('#FakeNextButton').click(function(){
var errCnt=0
var totalOp = jQuery('.QuestionBody').find('tbody tr').find('input[type="text"]');

for(var i=0;i {


if(jQuery('input[type="text"]').eq(i).val().length > 0 && jQuery('input[type="checkbox"]').eq(i).is(':checked'))
{
errCnt+=1
}


}


if (errCnt > 0){
jQuery("div[id='QR~"+qid+"~VALIDATION']").css("display","block")
jQuery("div[id='QR~"+qid+"~VALIDATION']").html("Either enter value in box or select checkbox.")
jQuery("div[id='"+qid+"']").addClass("Highlight")
}
else{
jQuery("#NextButton").click();
};


});

Leave a Reply


Terms & Conditions