Solved
Javascript or jQuery change event
+13Has anyone tried using a jQuery change event on a question? Here is what I have tried:
Qualtrics.SurveyEngine.addOnReady(function()
{
var that = this;
// change event on a dropdown list
jQuery( "select[name='QR\\~QID11']" ).change(function() _
// only advance if a response is selected
if (jQuery( "select[name='QR\\~QID11']" ).val() != '') _
alert("list option changed"); // testing how many times this change event is fired
that.clickNextButton(); // move to the next page
}
_);
_);
(I had to replace the { and } in the code above with _ otherwise I could not post the code here without a 'You don't have permission to access' error on this forum.)
Anyway, when I tried the code above it fires the change event multiple times when I select an option from a dropdown list. As a result my survey skips ahead more than one page. (when I look at the source code on the survey it seems the change event appears in three different places, but I have it only defined in one question)
Best answer by w.patrick.gale
I gave up on testing the jQuery change event and tried something different. I thought I could work with the questionclick function but I noticed that the event fired as soon as you clicked on the dropdown box 'arrow' and fired a second time when a selection is clicked. However, you are able to distinguish between simply clicking on the drowdown box and making a selection through the element ID like so:
var that = this;
this.questionclick = function(event,element){
var elm = element.id;
// the dropdown ID is QR~QID11 and when you click on the dropdown box the element.id is equal to the dropdown ID, but each selection item has a separate element ID so if we exclude the clicking of the main dropdown component and only react to the selection of one of the response options, this functions as a change event when click on the dropdown
if (elm != 'QR\\~QID11' && elm != '') {
alert( elm);
that.clickNextButton();
}
}
So this seems to work for 'clicking' on a dropdown list but DOES NOT handle tabbing through questions and responses which would require a change event.
Probably the more versatile version is the following that does not hard-code the element ID:
var that = this;
this.questionclick = function(event,element){
var elm = element.id;
var elmId = element.id.split('~')[1]; // get question ID
var responseId = element.id.split('~')[2]; // get response ID
// we only care when a response is selected
if (responseId) {
that.clickNextButton();
}
}
+27You need to defer the next button click using setTimeout.
+13I gave up on testing the jQuery change event and tried something different. I thought I could work with the questionclick function but I noticed that the event fired as soon as you clicked on the dropdown box 'arrow' and fired a second time when a selection is clicked. However, you are able to distinguish between simply clicking on the drowdown box and making a selection through the element ID like so:
var that = this;
this.questionclick = function(event,element){
var elm = element.id;
// the dropdown ID is QR~QID11 and when you click on the dropdown box the element.id is equal to the dropdown ID, but each selection item has a separate element ID so if we exclude the clicking of the main dropdown component and only react to the selection of one of the response options, this functions as a change event when click on the dropdown
if (elm != 'QR\\~QID11' && elm != '') {
alert( elm);
that.clickNextButton();
}
}
So this seems to work for 'clicking' on a dropdown list but DOES NOT handle tabbing through questions and responses which would require a change event.
Probably the more versatile version is the following that does not hard-code the element ID:
var that = this;
this.questionclick = function(event,element){
var elm = element.id;
var elmId = element.id.split('~')[1]; // get question ID
var responseId = element.id.split('~')[2]; // get response ID
// we only care when a response is selected
if (responseId) {
that.clickNextButton();
}
}
+13> @TomG said: You need to defer the next button click using setTimeout.
Defer it to what? I can't tell how many times the change event will be fired, but I have seen in some cases up to 4 or 5 times.
+27If selectedIndex > 0 then click the next button with a timeout of 0 milliseconds (i.e. defer until the stack clears). I'd post the code, but I get an Access Denied error.
+13> @TomG said: I'd post the code, but I get an Access Denied error.
I believe if you simply replace the {} brackets with underscores then the you can post the code (it seems to only have a problem with the brackets).
Are you talking about using the setTimeout within the change event? If so I can't see how that would prevent the setTimeout function from being fired multiple times. I tried using the .off() method (which decreased the number of times the change event fired, but it still fired twice, which is one too many times).
var qid = this.questionId;
jQuery( "select[name='QR\\~"+qid+"']" ).off(); // called this statement from within the change event
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.