How to add javascript to form field questions? | XM Community
Solved

How to add javascript to form field questions?

  • 28 October 2020
  • 3 replies
  • 344 views

I need to edit a specific form field question asking for DOB to auto-populate the " - " between the MM-DD-YYYY when users type. I added a JavaScript code to that question, but instead of applying the MM-DD-YYYY to just the specific form question, it applies to every question in the block (i.e., form fields that ask for the user's name only allow ##-##-#### responses). I think I'm missing some code to apply it specifically to the form field I want (which is Q73, form field 1). Can you help me figure out what I'm missing? I would appreciate it!
I added this JavaScript to the question with the form field:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var that=this.questionId;

jQuery(".InputText").on("cut copy paste",function(e) {
   e.preventDefault();
  });
  jQuery(".InputText").on('keypress',function(){
    if(event.which != 8 && isNaN(String.fromCharCode(event.which))){
      event.preventDefault(); //stop character from entering input
    }
  var s = this.value.replace(/-/g,'');
    if(s.length==8){
     event.preventDefault(); 
    }
    if(s.length!=0){
      if(s.length>=3 && s.length<=5){
       var s1 = s.slice(0,2);
        var s2 =s.slice(2,s.length);
        this.value=s1+"-"+s2;
      }
      if(s.length>=6){
       var s1 = s.slice(0,2);
      var s2 =s.slice(2,4);
       var s3=s.slice(4,s.length);
       this.value=s1+"-"+s2+"-"+s3;
}  
     
}
});

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

How can I update this JavaScript to apply to one specific form field?

icon

Best answer by TomG 28 October 2020, 18:51

View original

3 replies

Userlevel 7
Badge +27

If the script is attached to Q73, instead of:
 jQuery(".InputText").on('keypress',function(){
Use:
jQeury("#"+this.questionId+" .InputText:first").on('keypress',function() {

https://www.qualtrics.com/community/discussion/comment/31483#Comment_31483TomG Thanks so much for your response!
I applied the change you suggested and ran into an issue. Your suggestion fixed the issue of the validation applying throughout the form. Now the issue is, the validation no longer applies to the form field in Q73 at all. Now, there is no validation for Q73. Can you tell what I missed?
Here's the Javacript I added to Q73:

Qualtrics.SurveyEngine.addOnload(function({/*Place your JavaScript here to run when the page loads*/var that=this.questionId;

jQuery(".InputText").on("cut copy paste",function(e) {
   e.preventDefault();

  });
jQuery(#"+this.questionId+".InputText:first").on('keypress',function() {
    if(event.which != 8 && isNaN(String.fromCharCode(event.which))){
      event.preventDefault(); //stop character from entering input

    }

  var s = this.value.replace(/-/g,'');
    if(s.length==8){
     event.preventDefault(); 

    }

    if(s.length!=0){
      if(s.length>=3 && s.length<=5){
      var s1 = s.slice(0,2);
      var s2 =s.slice(2,s.length)
      this.value=s1+"-"+s2;

      }

      if(s.length>=6){
       var s1 = s.slice(0,2);
      var s2 =s.slice(2,4);
       var s3=s.slice(4,s.length);
       this.value=s1+"-"+s2+"-"+s3;

}  
}

});

});

Qualtrics.SurveyEngine.addOnReady(function()

{
/*Place your JavaScript here to run when the page is fully displayed*/
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/31504#Comment_31504You are missing the quote before the # in

jQuery("#"+this.questionId...

Leave a Reply