Need multiple text boxes to show up on the same line as the answer choice | XM Community
Skip to main content
I am asking a question where every line needs to have a textbox. I have the code to make a textbox show up next to the choice text instead of below it, but that only works for one question. Does anyone know how to make this work when you have multiple textboxes?



This is how I want it to look:

!



This is how it is coming out:

!



Here is the code I am using to get a single textbox to show up on the same line as the text.

var QID = this.questionId;

var QIDOtherLabel = jQuery("#" + QID).find(".TextEntryBox").siblings().attr("id");

jQuery("[id='" +QIDOtherLabel+"']").append(jQuery("#" + QID).find(".TextEntryBox"));

jQuery("[id='" +QIDOtherLabel+"']").css("padding-top","30px");

jQuery("[id='" +QIDOtherLabel+"']").css("padding-bottom","30px");

jQuery("#" + QID).find(".TextEntryBox").css("float","none");
`attr("id")` only returns the id of the first element in the set, so you are always appending to the first element in the set (the first choice). You'll need to use a loop.
@tomg Any chance you know how to write that loop?
> @MHDunn said:

> @tomg Any chance you know how to write that loop?



```

jQuery("#" + QID + " .TextEntryBox").each(function() {

//loop code goes here

});

```
@TomG Can you take a look at my code, I'm missing a "}" and can't figure out where it goes?



{



var QID = this.questionId;

var QIDOtherLabel = jQuery("#" + QID + " .TextEntryBox").each(function() {

jQuery("[id='" +QIDOtherLabel+"']").append(jQuery("#" + QID).find(".TextEntryBox"));

jQuery("[id='" +QIDOtherLabel+"']").css("padding-top","30px");

jQuery("[id='" +QIDOtherLabel+"']").css("padding-bottom","30px");

jQuery("#" + QID).find(".TextEntryBox").css("float","none");



});
You need another }); at the end. You need to close the each function and the main function (just the opening { shown in your message, but I'm guessing it is addOnload).
I did close it and it's not working. Boxes are still appearing underneath rather than to the side. Any thoughts on what is stopping it from working?



Here is my code:

Qualtrics.SurveyEngine.addOnReady(function()

{

var QID = this.questionId;

var QIDOtherLabel = jQuery("#" + QID + " .TextEntryBox").each(function() {

jQuery("[id='" +QIDOtherLabel+"']").append(jQuery("#" + QID).find(".TextEntryBox"));

jQuery("[id='" +QIDOtherLabel+"']").css("padding-top","30px");

jQuery("[id='" +QIDOtherLabel+"']").css("padding-bottom","30px");

jQuery("#" + QID).find(".TextEntryBox").css("float","none");

jQuery("#" + QID).find(".TextEntryBox").css("margin-left", "30px");

});

});
> @cma said:

> I did close it and it's not working. Boxes are still appearing underneath rather than to the side. Any thoughts on what is stopping it from working?

Now that I look at it more closely, I think QIDOtherLabel is undefined inside the each function.
@TomG What do I need to add to define the var?

I used this code for 2 text boxes and it worked:

Qualtrics.SurveyEngine.addOnload(function() {

  jQuery("#"+this.questionId+" .TextEntryBox").each(function() {

      var tb = jQuery(this);

      tb.css({"float":"none","background-color":"white","width":"100%"});

      tb.prev("label").css("display","block").append(" ").append(tb);

  });

});

Leave a Reply


Terms & Conditions