Add a button on form field question for respondents to "add another response"

@ltucker You can use in-page display logic for this where you can create multiple form field questions and use CSS to match look and feel. Also, if you want the same look and feel as in image use side by side question type.

Hope it helps!

Thank you! I’m a little lost as how to do this practically, any way you could share some screenshots or something more specific?

If using a Side by Side question, try adding the below to the OnReady section of the question’s JavaScript. It will hide all but the first row and then display more rows each time the + button is clicked.

var that=this.questionId;
jQuery("#"+this.questionId+" tr.Choice:not(:eq(0))").hide();

jQuery("<input type='button' id='add' value='+' name='+' />").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(); 
    });

jQuery("<input type='button' id='minus' value='-' name='-' />").insertAfter("#add");
jQuery("#minus").on('click',function(){
        var d= jQuery("tr.Choice:visible").length;
        d -= 1;	
        jQuery("#"+that+" tr.Choice:eq("+d+")").hide();
    });

If you go the In-page Display logic route, you can configure multiple Form Field questions and then only display them if the respondent selects “Add another person” in a Multiple choice answer option. More on on how to set that up here.

I’m not sure what I’m doing wrong here, but nothing changed when I added the code. Am I supposed to initialize the code somehow or should it work automatically? 

@ltucker Hmm I’m not sure, the full code is below:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/
var that=this.questionId;
jQuery("#"+this.questionId+" tr.Choice:not(:eq(0))").hide();

jQuery("<input type='button' id='add' value='+' name='+' />").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(); 
    });

jQuery("<input type='button' id='minus' value='-' name='-' />").insertAfter("#add");
jQuery("#minus").on('click',function(){
        var d= jQuery("tr.Choice:visible").length;
        d -= 1;	
        jQuery("#"+that+" tr.Choice:eq("+d+")").hide();
    });
});

How does it look when you Preview the survey?

@Tom_1842  Found this thread and really appreciate the code--works for me!

I noticed, though, that when I use this code for two back-to-back Side-by-Side questions, the button functionality gets messed up: the first button stops working after a certain number of clicks, and the second button never works at all. Any idea how to alter the code so it’ll work on two back-to-back questions?

Thanks!

@Taylor Sewell glad to hear! I see what you mean about it not working when there are 2 side by side questions on the same page. I think its because vars c and d weren’t restricted to just this.questionId. Also, the buttons that get created with jQuery should have different Ids. Try the below.

For the first side by side question:

var that=this.questionId;
jQuery("#"+this.questionId+" tr.Choice:not(:eq(0))").hide();

jQuery("<input type='button' id='add1' value='+' name='+' />").insertAfter("#"+this.questionId+" tr.Choice:last");
jQuery("#add1").on('click',function(){
        var c= jQuery("#"+that+" tr.Choice:visible").length;
        jQuery("#"+that+" tr.Choice:eq("+c+")").show(); 
    });

jQuery("<input type='button' id='minus1' value='-' name='-' />").insertAfter("#add1");
jQuery("#minus1").on('click',function(){
        var d= jQuery("#"+that+" tr.Choice:visible").length;
        d -= 1;	
        jQuery("#"+that+" tr.Choice:eq("+d+")").hide();
    });

And on the second side by side question:

var that=this.questionId;
jQuery("#"+this.questionId+" tr.Choice:not(:eq(0))").hide();

jQuery("<input type='button' id='add2' value='+' name='+' />").insertAfter("#"+this.questionId+" tr.Choice:last");
jQuery("#add2").on('click',function(){
        var c= jQuery("#"+that+" tr.Choice:visible").length;
        jQuery("#"+that+" tr.Choice:eq("+c+")").show(); 
    });

jQuery("<input type='button' id='minus2' value='-' name='-' />").insertAfter("#add2");
jQuery("#minus2").on('click',function(){
        var d= jQuery("#"+that+" tr.Choice:visible").length;
        d -= 1;	
        jQuery("#"+that+" tr.Choice:eq("+d+")").hide();
    });

Amazing @Tom_1842! Works great! Really grateful, thanks!

Thanks @Tom_1842 , agree this is really useful! I’m now running into a weird issue where this code worked previously -- but now doesn’t for some reason. I’ve tried duplicating the question, deleting the original, and using this same code. No dice. Any tips? 

@ac8571 hmm I just created a new Side by Side question and the above code worked for me. This thread was originally about Form Field question type, so maybe you are looking for that? If so, the tr.Choice in the selectors would need to be changed to just tr, like in the below:

var that=this.questionId;
jQuery("#"+this.questionId+" tr:not(:eq(0))").hide();

jQuery("<input type='button' id='add1' value='+' name='+' />").insertAfter("#"+this.questionId+" tr:last");
jQuery("#add1").on('click',function(){
        var c= jQuery("#"+that+" tr:visible").length;
        jQuery("#"+that+" tr:eq("+c+")").show(); 
    });

jQuery("<input type='button' id='minus1' value='-' name='-' />").insertAfter("#add1");
jQuery("#minus1").on('click',function(){
        var d= jQuery("#"+that+" tr:visible").length;
        d -= 1;	
        jQuery("#"+that+" tr:eq("+d+")").hide();
    });

If that wasn’t it, can you share a little more about your setup?

The easiest method would definetely be to add in page display then proceed to show but hide won’t work. Hence I’d suggest to create a side by side question and then have a button associated for every row to show/hide the row. Also, make sure to clear the answer if you have that requirement.

To show or hide the simplest would be to use .css(‘display’,’inline’) or .css(‘display’,’hide’) respectively and will look like below. This will work for most of the browsers.

jQuery(‘#classID’).css(‘display’,’inline’)

For buttons you can use w3 schools to learn more on CSS (https://www.w3schools.com/tags/tag_button.asp).

Let me know if you need any help with that.

The above solutions are for Classic, Flat, and Modern layouts. If anyone is using Form Field question type with Simple layout, the below can be used to hide/reveal the Form Fields:

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

const formList = document.getElementById('question-'+this.questionId);

	// Create the add (+) button
    const addButton = document.createElement('button');
    addButton.id = 'add-field';
    addButton.textContent = ' Add Form Field ';
	addButton.style.border='1px solid black';
	addButton.style.padding='5px';

    // Create the remove (-) button
    const removeButton = document.createElement('button');
    removeButton.id = 'remove-field';
    removeButton.textContent = ' Remove Form Field ';
	removeButton.style.border='1px solid black';
	removeButton.style.padding='5px';

	 // Append both buttons after the form list
    formList.parentNode.appendChild(addButton); // Add the '+' button
    formList.parentNode.appendChild(removeButton); // Add the '-' button


const formFields = formList.getElementsByClassName('choice');

    // Initially hide all form fields except the first one
    for (let i = 1; i < formFields.length; i++) {
        formFields[i].style.display = 'none';
    }

    // Add field button functionality
    document.getElementById('add-field').addEventListener('click', function() {
        for (let i = 0; i < formFields.length; i++) {
            if (formFields[i].style.display === 'none') {
                formFields[i].style.display = 'block';
                break; // Show one field at a time
            }
        }
    });

    // Remove field button functionality
    document.getElementById('remove-field').addEventListener('click', function() {
        for (let i = formFields.length - 1; i >= 0; i--) {
            if (formFields[i].style.display === 'block') {
                formFields[i].style.display = 'none';
                break; // Hide one field at a time
            }
        }
    });

});