Static Text for Text Entry on Single Choice MC Q

https://community.qualtrics.com/XMcommunity/discussion/23210/static-text-for-text-entry-on-single-choice-mc-qThe following link should help you for suffix, you can modify it for prefix as well. Try the below code in addition to yours
Qualtrics.SurveyEngine.addOnReady(function()
{

jQuery("#" + this.questionId + " .InputText ").attr('placeholder', 'static text');


jQuery("#" + this.questionId + " .InputText ").keyup(function(){
var str = this.value;
    var suffix = " static text";


    if(str.search(suffix) === -1){
        str += suffix;
    }


    var actualLength = str.length - suffix.length;


    // set the value
    this.value = str.substr(0,actualLength) + suffix;


    // set cursor position
    this.setSelectionRange(actualLength,actualLength);    
});
});


Hope it helps!

Thanks for the help Deepak. It is not quit what I am looking for. I need to place a $ in front of the text box. Additionally, I need to add a word following the textbox. For example, the salary option will have "$" as a prefix and "annually" as a suffix.

https://community.qualtrics.com/XMcommunity/discussion/comment/52786#Comment_52786Sorry, I thought you needed within the Text box. You can use the below code for the outside textbox.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery(".QR-"+this.questionId+ "-1").after(' $');
jQuery(".QR-"+this.questionId+ "-1").before(' annually');
jQuery("#"+this.questionId+ " .InputText").css('max-width','90%');
});

I have included for annually and $ you can do for others.
Hope it helps!

Deepak
I added images of every option below.
I need the hourly one to have prefix "$" and suffix "hourly"

I need the salary option to have prefix "$" and suffix "annually"


I need the commission option to have a suffix of "% of account"

Can you assist with this by chance? I am clueless when it comes to coding. I am just now starting to learn...

https://community.qualtrics.com/XMcommunity/discussion/comment/52787#Comment_52787https://community.qualtrics.com/XMcommunity/discussion/comment/52788#Comment_52788Thank you. I do not know where to put that into the javascript code honestly. I would like to have different prefixes and suffixes for each one but do not think my original code is set up for that. You are super helpul by the way! 😀

jlwdawgs you can modify the code from this post to get the after working correctly, I still haven't gotten the leader to work with this or Deepak guidance but maybe I'm doing something wrong or someone can give you a quick fix from here. https://community.qualtrics.com/XMcommunity/discussion/102/how-to-add-static-text-after-a-text-entry-box

Qualtrics.SurveyEngine.addOnload(function()
{
//Create variables for each row of options you have
var row1 = jQuery("#"+this.questionId+" .InputText:eq(0)"); //assigns to your first option
var row2 = jQuery("#"+this.questionId+" .InputText:eq(1)");
var row3 = jQuery("#"+this.questionId+" .InputText:eq(2)");

$(row1).before(' $'); //something her isn't inserting the descriptor in front of the box
$(row1).after(' hourly');

$(row2).before(' $'); //something her isn't inserting the descriptor in front of the box
$(row2).after(' annually');

$(row3).after(' % of account');

});

https://community.qualtrics.com/XMcommunity/discussion/comment/52793#Comment_52793bstrahin & jlwdawgs I was writing the same code bstrahin included here.
Yes, it's difficult to indent the text box here. Hence, both values are appearing after and not before.
One recommendation could be to use an additional form field question where you can have option based display logic on previous choice and use the code I mentioned above to get the desired result.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery(".QR-"+this.questionId+ "-1").after(' $');
jQuery(".QR-"+this.questionId+ "-1").before(' hourly');
jQuery(".QR-"+this.questionId+ "-2").after(' $');
jQuery(".QR-"+this.questionId+ "-2").before(' annually');
jQuery(".QR-"+this.questionId+ "-3").after(' %');
jQuery("#"+this.questionId+ " .InputText").css('max-width','90%');
});
Which would look like this

But yes, TomG can do anything.

TomG
Deepak & bstrahin Let's see if Tom would like to assist with this code. I feel like if someone can figure it out they will save many headaches in the future. It seems to be a common type of question in surveys. For example, asking about an employee's benefits and then allowing text entry for number of sick days if selected in a checkbox situation. It keeps from having more questions in the survey essentially.

The text inputs float left. So do this:
Qualtrics.SurveyEngine.addOnload(function() {
var textInputs = jQuery("#"+this.questionId+" .InputText").css("float","none");
textInputs.eq(0).before("$ ").after(" hourly");
textInputs.eq(1).before("$ ").after(" annually");
textInputs.eq(2).after(" %");
});
If you want mobile compatibility, you'll need CSS to override the media width !important rule that forces the text inputs to 100% wide.

https://community.qualtrics.com/XMcommunity/discussion/comment/52804#Comment_52804TomG Where would I insert this into the code below? I have tried every location in the code and the text appears before the box is selected. The prefix and suffix are there before selection and the text entry box appears after selection. Is there a way to correct that? Code below is from original post.

Additionally, how would I add code into the question to allow for 000,000 format for the salary question? The other two should not be over 50 in reality but salary will be in the thousands.

Qualtrics.SurveyEngine.addOnload(function()
{
var QID= this.questionId;
    jQuery("#"+this.questionId+" input[type='text']").attr('type', 'tel');
jQuery("#" + QID + " .InputText ").hide();
     jQuery("#" + QID + " input[type='radio']").each(function(){


            if(jQuery(this).prop("checked") == true)
            {  
var v1 = jQuery(this).attr("id");
                jQuery("[id*='"+v1+"~TEXT']").show();
                }
           else
           {
            var v1 = jQuery(this).attr("id");
            jQuery("[id*='"+v1+"~TEXT']").val('');
            jQuery("[id*='"+v1+"~TEXT']").hide();
         }      
     });


  jQuery("#" + QID + " .Selection ").on("click change",function(){

       jQuery("#" + QID + " input[type='radio']").each(function(){

            if(jQuery(this).prop("checked") == true)
            {
                    var v1 = jQuery(this).attr("id");
                jQuery("[id*='"+v1+"~TEXT']").show();
                }
           else
           {
            var v1 = jQuery(this).attr("id");
            jQuery("[id*='"+v1+"~TEXT']").val('');
            jQuery("[id*='"+v1+"~TEXT']").hide();
         }      
     });
      });


});



Also, how is the CSS override accomplished to make mobile friendly?

JacobW,

Where would I insert this into the code below?

I have tried every location in the code and the text appears before the box is selected. The prefix and suffix are there before selection and the text entry box appears after selection. Is there a way to correct that?