Search code examples
javascriptprototypejsqualtrics

How to hide the next button on qualtrics until a text field is filled in with text?


I have a survey with two questions on the page (one that is multiple choice) and one that is a text entry question.

I want to hide the next button until the text entry question has been filled out but I've only been able to hide the next button indefinitely and it seems to not reappear after the text field has been filled in.

Qualtrics.SurveyEngine.addOnload(function()
{   
    this.hideNextButton();
    (function() {
        $('form > input').keyup(function() {
            var empty = false;
            $('form > input').each(function() {
                if ($(this).val() == '') {
                    empty = true;
                }
            });

            if (empty) {hideNextButton ()} else {showNextButton ()}
        });
    });
});

Solution

  • You have some syntax errors. It looks like you are trying to use jQuery instead of Prototypejs. Besides that, you need to restrict your input element search to the question and there is only one input field so you only need one function. Try this (edited to defer initial next button hide):

    Qualtrics.SurveyEngine.addOnload(function() {   
        function hideEl(element) {
            element.hide();
        }   
        var nb = $('NextButton');
        hideEl.defer(nb);
        $(this.questionId).down('.InputText').on('keyup', function(event) {
            if(this.value.length == 0) nb.hide();
            else nb.show();
        });
    });