Display text field on button toggle | XM Community
Skip to main content

Hi Guys,

I’m trying to display the text entry field only when the button is clicked. 

The above image represents my actual view where in the text entry field(of Qualtrics) is only displayed when the user clicks on comment button.

I’m actually trying to achieve this using Javascript .Below is initial Javascript code I used  but for some reason this doesn’t seem to work as expected. I Appreciate some help here Thank You!.

 

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
    var questionId = 'QR~QID2';
    var commentId='comment';
     var inputElement = document.getElementById(questionId);
    var cmnt=document.getElementById(commentId);
     inputElement.hide();
    $(document).ready(function(){
     $(commentId).onclick(function(){

       inputElement.slideToggle("fast");
  });
    }); 

});

One way to approach this is to create a Text Entry question and use the Rich Content Editor’s HTML/Source view “<>” to update the Question Text with the below:

<button id="commentButton">Add Comment</button>

Then, add the below to the question’s JavaScript in the OnLoad section:

var qid = this.questionId;
var button = document.getElementById("commentButton");

jQuery("#"+qid+" .InputText").hide();

button.onclick=function() {
	jQuery("#"+qid+" .InputText").toggle();
};

Each time the button is clicked, the Text Entry field will toggle between hidden and shown.

Add below code in HTML View:

Click button to open a text box
<br><br>
<button type="button" id="Button1">Add comment</button>

 

Add below code in Javascript:

    var qid = this.questionId;
var button = document.getElementById("Button1");

    jQuery("#"+qid+" .InputText").hide();
    
button.onclick=function() {
    jQuery("#"+qid+" .InputText").show();
}

 

I suggest you not to use toggle function as there may be a chance that user inputs a text but then clicks the button again to clear it BUT it results in hidden text box with data in it. As it is an open end, you can “Request response” rather than making it a “Force response”.

 

Hope this helps :)

Thank You @Tom_1842 , @Prateek.Dang this helped a lot. Can I know if there are any resources available to learn about jquery /javascript in implementation in Qualtrics. Again Thanks for the support!.

TomG's comment in this thread has links to relevant w3schools pages for HTML, CSS, JavaScript, and jQuery.

I would also recommend TomG's JavaScript Qualtrics solutions on this page to get an idea of some of the interesting things that can be done with JavaScript in Qualtrics.

A similar page with JavaScript Qualtrics solutions is on this page that I think belongs to ahmedA.

Finally, the Qualtrics JavaScript question API documentation.

Leave a Reply


Terms & Conditions