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");
Best answer by TomG
> @MHDunn said:
> @tomg Any chance you know how to write that loop?
```
jQuery("#" + QID + " .TextEntryBox").each(function() {
//loop code goes here
});
```
`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.
> @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.
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");
