You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

无需切换矩阵表类型,如何在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

  1. In your Qualtrics survey, create a Form Field question.
  2. 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.
  3. Click the question's JavaScript tab, select Add JavaScript, and paste the code above.
  4. 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 .Choice with 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_

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.28 12:32:34