无需切换矩阵表类型,如何在Qualtrics表单字段类问题中为受访者添加「Add choice」按钮
Solution for Adding Dynamic Input Fields to Qualtrics Form Field Questions
I get it—you want that "Add field" functionality for your Form Field question without switching to a Matrix Table. Let's adjust that code to work with Qualtrics' Form Field structure.
Step-by-Step Adjusted Code
First, here's the modified JavaScript tailored for Form Field questions:
var questionId = this.questionId; var $allChoices = jQuery("#" + questionId + " .Choice"); // Hide all input fields except the first one initially $allChoices.not(":first").hide(); // Insert the "Add field" button after the last visible input jQuery('<input type="button" id="addFieldBtn" value="Add field" style="margin-top: 10px; padding: 5px 10px;" />') .insertAfter($allChoices.last()); // Handle button click to show next field (or create new ones if needed) jQuery("#addFieldBtn").on("click", function() { // Show the first hidden preset field if available var $hiddenChoice = $allChoices.filter(":hidden").first(); if ($hiddenChoice.length > 0) { $hiddenChoice.show(); } else { // Optional: Dynamically create a new input field if all presets are used var newFieldNumber = $allChoices.length + 1; var newChoiceHtml = ` <div class="Choice"> <label class="Label">Tool ${newFieldNumber}</label> <input type="text" name="QR~${questionId}~${newFieldNumber}" class="TextInput" /> </div> `; var $newChoice = jQuery(newChoiceHtml); $newChoice.insertBefore(jQuery(this)); $allChoices = $allChoices.add($newChoice); // Update our collection of fields } });
How to Use This
- In your Qualtrics survey, create a Form Field question.
- Add as many preset input fields as you think you might need (e.g., 5-10) — this gives a fallback if the dynamic creation isn't needed, but the code will handle adding more if required.
- Click the question's JavaScript tab, select Add JavaScript, and paste the code above.
- Save your changes and preview the survey to test the functionality.
Key Adjustments from the Original Matrix Table Code
- DOM Selector Change: Switched from
tr.ChoiceRow(Matrix Table rows) to.Choice(the container class for Form Field input rows in Qualtrics). - Button Placement: Inserted the button directly after the last input field for better UX.
- Dynamic Field Creation: Added optional logic to generate new input fields on the fly once all preset ones are visible — this ensures respondents can add as many fields as they need, no preset limit.
Notes
- If your Form Field uses a different class for input containers (unlikely, but possible), use your browser's developer tools (F12) to inspect the element and replace
.Choicewith the correct class name. - The dynamically created fields follow Qualtrics' naming convention (
QR~QIDXX~N) so responses will be captured correctly in your survey data.
内容的提问来源于stack exchange,提问作者el_
相关产品推荐
相关产品推荐

