Hey @courtrc , sorry to hear about the issues. Can you confirm if it’s at least inputting the information in-survey, just not saving? Or will nothing appear filled in when entering info on the survey?

@Tom_1842 may be able to assist more on this issue since he helped so much with your last inquiry!

Your jQuery selector is incorrect, so it isn’t finding the Qualtrics input field.  Replace .text-input with .InputText.

@tannerfaragher I’m not exactly sure what you’re asking but selecting the date from the Flatpickr in the survey does input a date into the field. I included a screenshot of that above. It’s just not saving. Every other piece of data in the survey saves, just not the date when submitting the survey.

I even tried to inspect the survey to see but I’m not technically savvy to look into if there’s something going wrong from when the date is showing as selected in the field and upon clicking submit.

@courtrc, thanks for the info, and sorry for the confusion on my reply. Yes, I was just checking to see if selecting the date from Flatpickr did at least put the date in the field. It sounds like Tom has a potential fix, hope it works! Y’all are awesome!

@TomG thank you so much! How would I know where to look for the correct jQuery selector name in the future?

I know how when inspecting the field I can see the class=”text-input” which was what I had in there from my previous posts’ suggested solution, but not sure how/where to look to know I’ve got the right jQuery selector.

@TomG unfortunately, that change actually made it so the Flatpickr doesn’t display at all now. I’m assuming something to do again with using the Simple Layout Theme.

Based on the screen shot, .text-input is correct. You have an atypical variety of Qualtrics - maybe related to simple layout. Therefore, I’m not sure why it isn’t saving.

I was going to mention that in your header, you are loading flatpickr twice. You only need to load the flatpickr css and flatpickr js once.

Hello! Sorry about that, I only tested getting Flatpickr to display, not saving the values.

This is indeed specific to Simple layout. I tried a couple methods to get the value to save to an input or embedded data field, but unfortunately none of them panned out.

Saving the value to an input field, either the input where Flatpickr is initialized or a separate/hidden input field that populates with the value of Flatpickr when a date is selected, did not work. The values get wiped away from the input fields as soon as the Next button is pressed. The value was retained in the input field IF the input field was clicked into and a keypress was recorded, but just setting the value with JS did not actually save it to the input. My attempts to simulate this keypress programmatically also did not pan out.

Saving the value to an embedded data field also did not work. When trying to use Qualtrics.SurveyEngine.setEmbeddedData, I encountered an error message in the console that I have not seen before. "setEmbeddedData deprecated, please use `setJSEmbeddedData`". I updated to Qualtrics.SurveyEngine.setJSEmbeddedData, but this does not appear to do anything at this time.

So I think currently with Simple Layout, inputs have to actually be typed into for the values to be saved. Without a way to save the Date value to an input field or to an Embedded Data field, I am not sure how to record the Flatpickr selection.
 

@Tom_1842 Appreciate all your attempts to solve this conundrum. I’ll just hold off for now and just resort to a text field with a date format validation which is a bummer cause Flatpickr is so slick.

I wish I knew how to mark this as Not Resolved anymore. But I don’t know who to even contact for that. I don’t think submitting a support ticket makes sense for that but idk who else to try to contact or if there’s a way to tag an admin user to this thread. 

Happy to help, and sounds good. @AmaraW is a Community Admin and might be able to help here.

@courtrc & @Tom_1842 - all fixed 

Hi @courtrc, so I found a hint on this page about setting Embedded Data and the below is working for me to store Flatpickr selections with Simple Layout. First, the hint:

setJSEmbeddedData(key, value)
Sets embedded data on the page. Only embedded data fields in the namespace _js can be set by this method.

The full process:

Add the below to the Survey's Header:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>

Next, create a Text Entry question and add the below to the question's JavaScript in the OnReady section:

jQuery("#question-"+this.questionId+" .text-input").flatpickr({
    dateFormat: "Y-m-d",
	onChange: function(selectedDates, dateStr, instance) {
		Qualtrics.SurveyEngine.setJSEmbeddedData("date1",dateStr);
	}		
});

Finally, in the Survey Flow, add the following Embedded Data field at the top of the Survey Flow:

__js_date1

The Flatpickr selection will be saved to the "__js_date1" Embedded Data field, even though it being set to “date1” in the JavaScript.

@Tom_1842 I’m not sure why I didn’t get notified of your replies. But appreciate it nonetheless!

I applied the jQuery and it works and stores the data in the embedded data when the question is optional. However, this question is required in my form and when I set the question as required, it throws an error and doesn’t let the form get submitted.

Any thoughts on this?
EDIT: When I look at Data & Analysis, it doesn’t show anything storing for that question, which makes sense…. ‍♀️ and how we got to this solution with the embedded data to begin with…So I’m not sure if there IS a solution other than making the field optional?

When field is optional, data storing:

When field is required, throwing an error.

Well I think I came up with a hack to get it to work.

Since the question is required, some value needs to be stored. So I set the question to have a default value of today’s date, so it stores that into the question to pass the requirement, but then stores the FlatPickr value into the embedded data because that’s the value I care about. 

When testing the field, the default value doesn’t actually display in the field, so the user doesn’t necessarily see that the question is storing today’s date. Which is inconsequential.

Combo answer:

This from @Tom_1842  

setJSEmbeddedData(key, value)
Sets embedded data on the page. Only embedded data fields in the namespace _js can be set by this method.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>

jQuery("#question-"+this.questionId+" .text-input").flatpickr({
    dateFormat: "Y-m-d",
	onChange: function(selectedDates, dateStr, instance) {
		Qualtrics.SurveyEngine.setJSEmbeddedData("date1",dateStr);
	}		
});

__js_date1

Plus this hack if your date field is required: 

Well I think I came up with a hack to get it to work.

Since the question is required, some value needs to be stored. So I set the question to have a default value of today’s date, so it stores that into the question to pass the requirement, but then stores the FlatPickr value into the embedded data because that’s the value I care about. 

 

When testing the field, the default value doesn’t actually display in the field, so the user doesn’t necessarily see that the question is storing today’s date. Which is inconsequential.

 

@courtrc Something I've noticed about Simple layout is that it forces clarity around which text data was created with JavaScript. Only being able to set Embedded Data to __js_ Embedded Data fields and being unable to set the value of text inputs in a way where the value is retained on page submit ensures that __js_ Embedded Data fields are the only fields that will contain text data created through custom JavaScript.

Since the Flatpickr selection is not being saved to the text input in a way that makes it to Qualtrics, it considers this field blank and throws a Force Response error. In your workaround, I don't think Force Response will ever trigger since the text input will always have a value in it through Default Choices.

Another approach to add Force Response to a Flatpickr text input is to have a hidden Multiple Choice question with Force Response enabled on the same page as the Flatpickr question that listens for any change to the text input and adds an answer to the MC question if a change is detected. The respondent can then only advance in the survey if a Flatpickr selection is made. To give it a try, create a Multiple Choice question after the Flatpickr text input, enable Force Response on it, and add the below to the MC question's JavaScript in the OnReady section:

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

//define text input
jQuery("#question-"+this.questionId+" .text-input").eq(0).attr('id','text1');
var text1 = document.getElementById("text1");

//add event listener to text input to answer MC if text input is updated
var that=this;
text1.addEventListener('change', function () {
that.setChoiceValue(1, true);
});

Just want to update the JS in my earlier post for selecting the text input:

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

//define text input
jQuery(".text-input").eq(0).attr('id','text1');
var text1 = document.getElementById("text1");

//add event listener to text input to answer MC if text input is updated
var that=this;
text1.addEventListener('change', function () {
that.setChoiceValue(1, true);
});

So I figured out another workaround for when the user doesn’t click on the calendar picker, and they proceed with my default value which I’m using today’s date. I ended up including some logic:

I applied this to one, just to test. Then once I confirmed it worked, I applied it to the rest of my sections like this. 

What the data & analysis looks like:

Hi, I am struggling to add the default value even though I believe I have the setup exactly right, see the gif attached. 

Basically it will not take any values from the dropdown, and if I try to manually write anything in it will never save, is there something wrong in my setup possibly? I believe I am using all the same JavaScript/HTML as I see in this threa

d, however I did save the HTML links/scripts directly in the text of the question, since I can’t figure out what y’all are referring to when you say “Survey Header”.

Hi, I am struggling to add the default value even though I believe I have the setup exactly right, see the gif attached. 

 

Basically it will not take any values from the dropdown, and if I try to manually write anything in it will never save, is there something wrong in my setup possibly? I believe I am using all the same JavaScript/HTML as I see in this thread, however I did save the HTML links/scripts directly in the text of the question, since I can’t figure out what y’all are referring to when you say “Survey Header”.

@duncangates I’ll double check my set up for the default choices and see if I can figure out what’s different. I’ll report back.

For the Survey Header, if you navigate to the Look and Feel section on the left side (paint brush icon), then go down to General, you will find a field for Header there. 

Click edit.

And initially, it will be blank, but if you select the Source icon which is the paper with <>. Then you can paste the code there.

Here’s the code I’m using if you want to use it. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>

@duncangates what Layout are you using? I’m using the Simple Layout, but I don’t think that should affect the default choices from working in a question.

I tested mine out and I was able to even add an additional piped text for default choice. 

I am stumped on why yours isn’t being captured/saved. My two suggestions would be, try duplicating the question or redo it with a new question and see if it works then OR reach out to Qualtrics support because this feels like a bug in functionality and not something you’re doing wrong.

@courtrc

Using simple layout as well.

Thanks for the tip on adding to the header, I had gotten almost all the way there but didn’t see the little “code source” button, and didn’t think I should just be adding raw HTML code as a header, all makes sense now! I moved my HTML scripts/links there and now I can add a default value which is great, who knows why though ‍♂️

@duncangates  I’m glad to hear everything is working now! Strange that either the header HTML may or may not have had an impact on the default value? 

@courtrc It definitely was the header HTML location, when I associate it directly with the question somehow it breaks the ability to set the default value in Qualtrics, as soon as I remove it from the question it works again. Also probably has something to do with the simple layout JavaScript since it really seems to mess with everything.