Pick Group Rank, Java to add more items | XM Community
Skip to main content

I need Java script to add more items to the question but I would like each item to be text entry. If possible, I would like a small “Add Name” button above the items. Can someone help me with this?

Hi, I was able to put this in place by adapting the code here. To give it a try, first create a Pick, Group, and Rank question. For each Item, click on the dropdown arrow next to it and enable the “Allow Text Entry” setting. This will allow respondents to type in the names.

Next, use the Rich Content Editor’s HTML/Source view “<>” to update the Question Text with the below:

<input value="Add Name" type="button" id="btn">&nbsp; Click to write the question text

Finally, add the below to the question’s JavaScript in the OnReady section:

jQuery("div.Items>ul>li:not(:first)").hide();
jQuery("#btn").on('click',function(){
jQuery("div.Items>ul>li:eq("+parseInt(parseInt(jQuery("div.Items>ul>li:visible").length))+")").show();
});

All but the first Item will be hidden when the page loads. Each time the button is clicked, another Item will be revealed.


This worked amazingly! However, I was in a bit of a rush so I redesigned the question as a matrix question instead. No the the survey is public, would you show me how to use this in a matrix instead of a pick, group, rank? If possible, I would like to add the option to add additional entries to the matrix. 


Try adding the below to the OnReady section of the Matrix question’s JavaScript. It also includes a button for hiding rows. The buttons are included by the JavaScript but it works the same in that all but the first row will be hidden on page load and the buttons will reveal or hide a Matrix row once clicked.

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

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

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

 


I’m getting an “unexpected token }” error. 


Looks like I included the OnReady close bracket in the above. Sorry about that! Try using the below:

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

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

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

 


Thanks! This worked perfectly! I accidentally added the “add name” button to the above text but I realized my mistake pretty quickly. 


Leave a Reply