Removing default choice text with javascript when clicking into form field | XM Community
Skip to main content

Hello,

I am using simple layout. I have a form field with two inputs, both are set to display default choices of 0. This works as expected. When the respondent clicks into one of the fields, I would like for the 0 to disappear (instead of the respondent having to manually backspace or delete the 0).

In the question's JavaScript, I am using the following code, but it isn't working (I do have the jQuery call in the header). I'm guessing below code needs to be modified because I am using the simple layout. Suggestions?

Qualtrics.SurveyEngine.addOnload(function()
{
	jQuery("#question-"+this.questionId+".text-input").focus(function() {
    if(this.value == "0") {
        this.value = "";
    }	

});

 

Alternatively, if above will not work, I have also tried removing the 0 as default choices, and using the code below to set default text instead. This works as expected, the 0’s are appearing as default text. However, I would like to record the 0 as a response if the respondent does not enter anything into the field. In other words, let’s say in field A they enter 5, and field B they do not enter anything, I want field A to record 5 and field B to record 0 as the response. This unfortunately does not work, field B records as blank, which is not ideal for me because we need to record the actual 0, not a blank field (this also has implications because it is a forced response, eg the user would have to manually enter 0, and we don’t want to require them to do that).

 

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/
	jQuery("#question-"+this.questionId+" .text-input").attr("placeholder","0");

});

 


Thank you!

This might be late but I would remove the default choices and add the code below in the .addOnLoad section:

‘

jQuery(" .text-input ").attr("placeholder", "0");

 

‘

 

If you need to save the “0” instead of nothing, this can be done trough the survey flow.

To close the loop, here is how we solved it:

 

Qualtrics.SurveyEngine.addOnload(function() {
    // Set default value using Qualtrics functionality
    jQuery("#question-"+this.questionId+" .text-input").val("0");

    // Add a focus handler to clear the default value only on the first focus
    jQuery("#question-"+this.questionId+" .text-input").one('focus', function() {
        if (this.value === "0") {
            this.value = "";
        }
    });

    // Add an input handler to allow only positive whole numbers
    jQuery("#question-"+this.questionId+" .text-input").on('input', function() {
        // Allow only digits and no other characters
        this.value = this.value.replace(//^0-9]/g, "");

        // Ensure no leading zeros unless the value is exactly "0"
        if (this.value !== "" && this.value !== "0" && /^0/.test(this.value)) {
            this.value = this.value.replace(/^0+/, "");
        }

        // If the input is empty after removing invalid characters, set it back to "0"
        if (this.value === "") {
            this.value = "0";
        }
    });

    // Add a blur handler to set the value to 0 if the field is empty
    jQuery("#question-"+this.questionId+" .text-input").on('blur', function() {
        if (this.value === "") {
            this.value = "0";
        }
    });
});

 

 

Leave a Reply


Terms & Conditions