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);
    
    

});

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("inputlaria-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!

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. 

This is a Simple Layout feature I think. I’ve been having trouble with custom javascript and the layout. 

I’m trying to store an array to a hidden input but it isn’t saving the response. The array is too large for embedded data. I’m going to rebuild my entire project using a different layout.

I actually ended up resolving this one in the Simple Layout!

I discovered that the Simple Layout is rendered using ReactJS and ReactJS does not store data in a field unless you actually interact with that field. There’s a JavaScript trick though to ‘bubble’ the info.

If you Google the following you will find the post with the solution to update Text inputs in ReactJS:

“reactjs dispatchEvent on input/textarea is ignored”

The first result should be a GitHub thread about the problem:;trying to set an input value via javascript and having it save. It’s towards the middle of the thread where fatfisz has a ‘setNativeValue’ function scripted. I’ve been using this to set text inputs to whatever I want.

Using this you should be able to put a Qualtrics text question on the screen and then set the value of that text question to your array content. 

For those who need the solution:

Add this function:

function setNativeValue(element, value) {
    const valueSetter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), 'value').set;
    valueSetter.call(element, value);
}

To use:

// Where textEntry is your element
// Where textValue is the input value

setNativeValue(textEntry, textValue);

@Pete_L  @pogi This is great, thank you for sharing! On my end, I had to include the dispatchEvent line from fatfisz to get the text to stay in the input field. Below is working for me in the onPageSubmit function:

Qualtrics.SurveyEngine.addOnPageSubmit(function(type)
{

//function to set value of input field
function setNativeValue(element, value) {
  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
  const prototype = Object.getPrototypeOf(element);
  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;

  if (valueSetter && valueSetter !== prototypeValueSetter) {
  	prototypeValueSetter.call(element, value);
  } else {
    valueSetter.call(element, value);
  }
}

//Set the ID attribute of input field
const element = document.querySelector('#question-'+this.questionId+' > div > div > div > div > div.question-content > div > input');
element.setAttribute('id', 'textareaID');

//Set value of input field based on ID
var textEntry = document.getElementById('textareaID');
var textValue = 'test';
setNativeValue(textEntry, textValue);
textEntry.dispatchEvent(new Event('input', { bubbles: true }));

});

Looking forward to using this with Flatpickr and other JS generated data