Simple Layout - Replicate the text input of a text entry question to a hidden text entry question | XM Community
Question

Simple Layout - Replicate the text input of a text entry question to a hidden text entry question


Badge +3

Hello everyone,

 

I have posted this a week ago and it worked, unfortunately it does not work when using simple layout. I have a text entry question (old), I will add 3 new text entry questions based on the NPS question (Promoters, Passives, Detractors). Each time only 1 out of the 3 new questions will be shown to the respondents. The old one should be hidden. I want to hide the old question and replicate the input text from any of the 3 new questions to the hidden one. I want to keep the old question there because of export and TextIQ reasons

 

@TomG suggested the ideal solution for this scenario but I would like to make this code to fit when using simple layout. This is the code added to the hidden question:

Qualtrics.SurveyEngine.addOnload(function() {
   jQuery(this.questionContainer).hide();
});

Qualtrics.SurveyEngine.addOnPageSubmit(function() {
   jQuery("#"+this.questionId+" .InputText").val(jQuery(".InputText:first").val());
});

 

I am still not able to hide the question nor replicate the value from any of the 3 new questions there. On the page, I have 4 questions, the 3 new ones and the old one (hidden).

I have tried many things with no luck at the moment.

Any help/recommendations will be appreciated

 

Thanks,

Apostolos


3 replies

Badge +3

I added the code below, I have managed to hide the question. I am also able to save the input text to an embedded data field but I am not able to pass this text to the text question. So, I believe that the last line of my code is not working

 

 

Qualtrics.SurveyEngine.addOnload(function() {

 jQuery("#question-"+this.questionId).css({"display":"none"});
});


Qualtrics.SurveyEngine.addOnPageSubmit(function() {

var inputValue = document.querySelector('.text-input').value;

console.log(inputValue);
    
        Qualtrics.SurveyEngine.setJSEmbeddedData("CS", inputValue);
    
    jQuery("#question-"+this.questionId+" .text-input").val(inputValue);
    
    

    

});

Userlevel 3
Badge +9

If you’re testing this in Preview mode, there is an issue where setting the value of an input returns an uncaught error “cannot set property of null” because the element in the frame does not exist for some reason until you interact with the element.

To put it another way here is something I’ve been dealing with:

I have a text input that I’m targeting just like you with a query selector. Only difference is that I’m using vanilla javascript:

document.querySelector("input[aria-labelledby='question-display-QID2']").value = "Coolio";

In Preview mode, I can 100% see the element in the DOM. It exists. But executing that logic in the Chrome console returns: “Cannot set properties of null (setting ‘value’) at <anonymous>:1:80”

BUT…

If I click on the text box or inspect the text box via Chrome dev tools and then run the JS code, there is no problem setting the displayed value to Coolio.

If I run it in the live link, not preview, it sets Coolio no problem.

My next problem is that it does not save Coolio when you click next. It’s as if you can’t save a value on an input set via JS anymore unless someone interacts with the box. It makes me think there’s some kind of reactive code going on?

When I set value=coolio on the element, in the DOM the value is still value = “ “. But the display shows “Coolio” in the text box. Very strange!

Badge +3

Hi @Pete_L . Thanks for your response. I still have the same issues even after I changed the code. I tried to target the selector of the hidden question from the 3 NPS questions. I see the same issues in Chrome console on blur. When I click out of the entry box the value goes there but it disappears when I click the next page button. I get <anonymous> error just like you and also another error that the element I am targeting it does not have an id. 

Leave a Reply