Format a Phone field to have added dashes 303-234-2344 | XM Community
Skip to main content

I tried the below code and placed it in the JavaScript read area but when I test the phone field the dashes or even a space will not display. Can anyone help me with a solution to add dashes to a US phone field?

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
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==10){
     event.preventDefault(); 
    }
    if(s.length!=0){
      if(s.length>=3 && s.length<=5){
        var s1 = s.slice(0,3);
        var s2 =s.slice(3,s.length);
        this.value=s1+"-"+s2;
      }
      if(s.length>=6){
      var s1 = s.slice(0,3);
      var s2 =s.slice(3,6);
      var s3=s.slice(6,s.length);
      this.value=s1+"-"+s2+"-"+s3;
      }  
    }

});

Hi there, if you still need, Q2 in the attached QSF adds the hyphens on my end. JS for the text entry question below as well:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery("#"+this.questionId+" .InputText").attr( { 
type:"tel", 
onkeydown:"if(event.key==='.'){event.preventDefault();}" } );
});


Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
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==10){
          event.preventDefault(); 
        }
        if(s.length!=0){
            if(s.length>=3 && s.length<=5){
                var s1 = s.slice(0,3);
                var s2 =s.slice(3,s.length);
                this.value=s1+"-"+s2;
            }
            if(s.length>=6){
            var s1 = s.slice(0,3);
           var s2 =s.slice(3,6);
            var s3=s.slice(6,s.length);
            this.value=s1+"-"+s2+"-"+s3;
            }   
        }
});
});


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


});
Numbers_and_Phone_Numbers.qsf


Thank you sooo much, successes! Your updates on the JavaScript worked. I've been going in cycles trying to figure out the solution.
Thank you very much,
Mark


Sorry, I only checked the phone number field the solution works great for the phone number field but I am not able to use any of the text fields. I have to place a number in all the fields. I applied the script to the phone number but it somehow works on all the fields. Any ideas on how to get the dash/JavaScript solution to just work with the phone number field only?


I see what you mean. Try using the below. I updated it to use jQuery("#"+this.questionId+" .InputText") instead of all .InputText.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery("#"+this.questionId+" .InputText").attr( { 
type:"tel", 
onkeydown:"if(event.key==='.'){event.preventDefault();}" } );
});


Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" .InputText").on("cut copy paste",function(e) {
      e.preventDefault();
   });
    jQuery("#"+this.questionId+" .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==10){
          event.preventDefault(); 
        }
        if(s.length!=0){
            if(s.length>=3 && s.length<=5){
                var s1 = s.slice(0,3);
                var s2 =s.slice(3,s.length);
                this.value=s1+"-"+s2;
            }
            if(s.length>=6){
            var s1 = s.slice(0,3);
           var s2 =s.slice(3,6);
            var s3=s.slice(6,s.length);
            this.value=s1+"-"+s2+"-"+s3;
            }   
        }
});
});


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

});
Numbers_and_Phone_Numbers.qsf


Tom,
That fixed it! Thank you so much for sticking with me on getting the dashes to work in the phone number field. I did three tests and they all worked flawlessly.
Thank you once again,
Mark P.


Tom, I am having the same or similar issue - as above, using a Form Field and Side by Side question formats, but would like to apply this javascript to only one field within those questions. The javascript is applying it to all the fields in the question or none depending on where I'm inputting the Q no. (Q2#1_1_4) I am not proficient in Java so any 'extra' help you could provide would be so appreciated!


Try pasting the below code in the telephone field

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/


jQuery("#"+this.questionId+" .InputText").attr( { 
type:"tel", 
onkeydown:"if(event.key==='.'){event.preventDefault();}" } );
});



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

jQuery("#"+this.questionId+" .InputText").on("cut copy paste",function(e) {
   e.preventDefault();
  });
  jQuery("#"+this.questionId+" .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==10){
     event.preventDefault(); 
    }
    if(s.length!=0){
      if(s.length>=3 && s.length<=5){
        var s1 = s.slice(0,3);
        var s2 =s.slice(3,s.length);
        this.value=s1+"-"+s2;
      }
      if(s.length>=6){
      var s1 = s.slice(0,3);
      var s2 =s.slice(3,6);
      var s3=s.slice(6,s.length);
      this.value=s1+"-"+s2+"-"+s3;
      }  
    }
});
});




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

});


Leave a Reply