Automatically add rows to a text-entry form | XM Community
Skip to main content

Hi all,
I have a text entry form, and would like to have it start with just two rows but then automatically add a new row as soon as the previous row is filled out. For instance, as soon as someone writes in the 2nd row, a 3rd row appears. Then when that person writes on the 3rd row, a 4th row appears. And so on.
As a foundation, I'm starting from the following JS from THIS post:
var that=this.questionId;
jQuery("#"+this.questionId+" tr.Choice:not(:eq(0))").hide();
jQuery("").insertAfter("#"+this.questionId+" tr.Choice:last");
jQuery("#add").on('click',function(){
var c= jQuery("tr.Choice:visible").length;
jQuery("#"+that+" tr.Choice:eq("+c+")").show();
});
Two questions:
1) The above code is written for a Side-By-Side question type. How do I change this (a) to work for a Text Entry Form question type? and (b) to make it based on the entry field not being empty (i.e., participants have typed in)? It's currently based on a choice/selection in the Side-by-Side.
2) (ideal but not necessary) Is there a way to do this automatically rather than force users to press a 

+
button?
Thanks so much! I know only minimal JS, so your help is much appreciated.

Qualtrics.SurveyEngine.addOnReady(function () {
    let input_boxes = this.getChoiceContainer().querySelectorAll(".InputText");
    
    let choice_rows = e];
    
    input_boxes.forEach((box) => {
        var parent_row = box.ancestors()1];
        choice_rows.push(parent_row);
    
        box.oninput = function () {
            new_row(parent_row.rowIndex + 1);
    
        };
    });


    // Start with how many ever rows you want to show at the beginning
    for (let i = 1; i < choice_rows.length; i++) {
        choice_rowsi].hide();
    }


    function new_row(show_row) {
        if (show_row < choice_rows.length) {
            choice_rowsdshow_row].show();
        } else {
            console.log("You've reached the maximum number of permissible rows");
        }
    }
});

Modified from this answer.

Fantastic. Absolutely perfect. Thanks so much, ahmedA!

Leave a Reply


Terms & Conditions