https://community.qualtrics.com/XMcommunity/discussion/24043/javascript-to-hide-the-next-button-until-text-validation-reachedYou need to include a function which detects real time text entry. Currently you have kept it on load directly , you have to execute this code each time the person types by including function. Post which your code will work.
Hope it helps

---

Hi JonesE ,
You have to add an event listener ("onchange") to your textbox in which Respondents enter value and then write your above code inside it.
So , whenever your respondents enters value your above code will run and validates the text input.
And add all those code in addOnReady.
Presently , your code only runs only once when your page loads .
Hope it resolves your query!!!

---

qualtrics_nerd and Deepak thank you!!
This is helpful feedback that makes sense, but I'm still having trouble executing it. Here's what I have now, which removes the next button when the page is loaded, but the code for having it display once a change happens isn't working:
Any advice you have would be super helpful!! Thanks again! -Erin

---

JonesE
You need to replace a few lines of code also direct "this" wouldn't work. Try changing it with the below code at relevant places.
jQuery('.InputText').change(function(){
/*code*/
if(jQuery('.InputText').val()=='r9'){
/*code*/
}
});
Hope it helps!

---

JonesE,
Try this:
Qualtrics.SurveyEngine.addOnReady(function() {
var qobj = this;
qobj.disableNextButton();
qobj.hideNextButton();
jQuery("#"+qobj.questionId+" .InputText").change(function() {
this.value = this.value.trim();
if(this.value.toLowerCase()=="r9") {
qobj.enableNextButton();
qobj.showNextButton();
}
});
});

---

Hi JonesE ,
I wrote the below code which fulfils above requirement with condition that there is only one textbox on the page (you have to update code to integrate other textboxes).
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery("#NextButton").hide();


});


Qualtrics.SurveyEngine.addOnReady(function()
{
let text=document.querySelector("input[type=text]");

text.addEventListener("keyup",function(){
console.log("text entered");
if(text.value==="r9")
{jQuery("#NextButton").show();
}
    else if(text.value==="R9")
{jQuery("#NextButton").show();
} 
else {
   jQuery("#NextButton").hide();
}
  
})

});


Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/


});
Hope it resolves your query!!!

---

THANK YOU SO MUCH. I seriously love this community.
I tried the code that TomG and qualtrics_nerd offered, and they both worked, but with minor caveats:

• TomG's code didn't display the next button upon landing on the page, but in order for the correct answer to show the next button, I had to click outside of the text box after entering a response.


• qualtrics_nerd's code showed the next button upon page load, but upon clicking within the next box, it disappeared. Once the correct response was entered, the next button appeared automatically, without having to click outside the text box.

Ultimately, I worried that clicking outside of the text box wouldn't be intuitive to the survey taker, and since this is a timed task, I opted for the code offered by qualtrics_nerd, but I made a small tweak to prevent the next button from appearing on page load. Here's what I ended up with (in case anyone else in the future is interested):
Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton()

});



Qualtrics.SurveyEngine.addOnReady(function()
{
let text=document.querySelector("input[type=text]");


text.addEventListener("keyup",function(){
console.log("text entered");
if(text.value==="r9")
{jQuery("#NextButton").show();
}
    else if(text.value==="R9")
{jQuery("#NextButton").show();
} 
else {
   jQuery("#NextButton").hide();
}
   
})


});




Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/




});

---