Flatpickr date not storing data with survey | XM Community
Skip to main content
Solved

Flatpickr date not storing data with survey


courtrc
Level 3 ●●●
Forum|alt.badge.img+9

As a follow up to my last post:

I got it to display beautifully, but the question doesn’t seem to be storing the date value after completing the survey. I’m not sure if somehow it has to do with using the Simple Layout option for a Theme or what… 

 I even commented out some stuff in case that was the reason, but it doesn’t seem to make a difference in whether it gets stored or not.

I even tried to store it as embedded data prior to submitting the survey and that didn’t make a difference either.

I don’t know how else to troubleshoot the data value not getting saved/stored with the survey response…. Please send help.

Best answer by courtrc

Combo answer:

This from @Tom_1842  

Tom_1842 wrote:

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.

 

Plus this hack if your date field is required: 

courtrc wrote:

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.

 

 

View original

24 replies

tannerfaragher
QPN Level 5 ●●●●●
Forum|alt.badge.img+22
  • QPN Level 5 ●●●●●
  • 76 replies
  • May 17, 2023

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!


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5811 replies
  • May 17, 2023

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


courtrc
Level 3 ●●●
Forum|alt.badge.img+9
  • Author
  • Level 3 ●●●
  • 49 replies
  • May 17, 2023

@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.


tannerfaragher
QPN Level 5 ●●●●●
Forum|alt.badge.img+22
  • QPN Level 5 ●●●●●
  • 76 replies
  • May 17, 2023

@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!


courtrc
Level 3 ●●●
Forum|alt.badge.img+9
  • Author
  • Level 3 ●●●
  • 49 replies
  • May 17, 2023

@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.

 


courtrc
Level 3 ●●●
Forum|alt.badge.img+9
  • Author
  • Level 3 ●●●
  • 49 replies
  • May 17, 2023

@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.

 


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5811 replies
  • May 17, 2023

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.


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 867 replies
  • May 17, 2023

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.
 


courtrc
Level 3 ●●●
Forum|alt.badge.img+9
  • Author
  • Level 3 ●●●
  • 49 replies
  • May 17, 2023

@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. 😒


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 867 replies
  • May 18, 2023

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


AmaraW
Former XM Community Team Member
Forum|alt.badge.img+48
  • Former XM Community Team Member
  • 712 replies
  • May 18, 2023

@courtrc & @Tom_1842 - all fixed 😃


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 867 replies
  • May 31, 2023

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.


courtrc
Level 3 ●●●
Forum|alt.badge.img+9
  • Author
  • Level 3 ●●●
  • 49 replies
  • March 6, 2024

@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.

 


courtrc
Level 3 ●●●
Forum|alt.badge.img+9
  • Author
  • Level 3 ●●●
  • 49 replies
  • March 6, 2024

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
Level 3 ●●●
Forum|alt.badge.img+9
  • Author
  • Level 3 ●●●
  • 49 replies
  • Answer
  • March 6, 2024

Combo answer:

This from @Tom_1842  

Tom_1842 wrote:

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.

 

Plus this hack if your date field is required: 

courtrc wrote:

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.

 

 


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 867 replies
  • March 6, 2024

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

 


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 867 replies
  • March 7, 2024

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

 


courtrc
Level 3 ●●●
Forum|alt.badge.img+9
  • Author
  • Level 3 ●●●
  • 49 replies
  • July 15, 2024

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:

 


Forum|alt.badge.img

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”.


courtrc
Level 3 ●●●
Forum|alt.badge.img+9
  • Author
  • Level 3 ●●●
  • 49 replies
  • August 8, 2024
duncangates wrote:

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>

 


courtrc
Level 3 ●●●
Forum|alt.badge.img+9
  • Author
  • Level 3 ●●●
  • 49 replies
  • August 8, 2024

@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.


Forum|alt.badge.img

@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 🤷‍♂️


courtrc
Level 3 ●●●
Forum|alt.badge.img+9
  • Author
  • Level 3 ●●●
  • 49 replies
  • August 12, 2024

@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? 


Forum|alt.badge.img


@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.


Leave a Reply