I have tried to make the working of the next button in Qualtrics conditional a certain variable value in javascript. If the condition is not met, I want to display an error message. However, with my current code (where the condition is not met) I see the error message briefly and then I progress to the next question anyways.
The javascript code is:
Qualtrics.SurveyEngine.addOnload(function()
{
var test = 0;
$('NextButton').onclick = function (event) {
event.preventDefault();
if (test==1){
Qualtrics.SurveyEngine.navClick(event, 'NextButton');
}
else
{
document.getElementById("errorMessage").innerHTML = "Error message";
}
}
});
And the html code is simply:
<div id="errorMessage"><span>This is a test</span></div>
I would really appreciate any help.
Thank you,
Lukas
Unfortunately, due to the way Qualtrics is setup, it is very difficult to hijack / override the next button's onclick event. The simplest workaround that I have found is to hide the actual next button, create a different button, and use that button for your expected actions.
Related
I have a client that is using JSP (Java) and Javascript/JQuery for their pages. I have a requirement for a particular modeless pop up page that states the user cannot X out of the window if there is text in the description textarea (they will need to use a cancel button or clear out the text). That's part is easy and I have found a ton of ways to do it online. The part I am having trouble with is: They do NOT want the error in an alert box, they want the error message simply displayed in the same window without having to click and close the alert. I cannot seem to find anything that will disable the X button without the alert box. Also, we're browser agnostic, so the solution must work for any browser.
If this alert is enforced by the browser and there's no way around it, I can obviously explain that to the client, but I am not sure if that's the case or not.
So, I am asking ether for some ideas on how to meet the requirement or if the requirement is impossible, some evidence to back that up.
This is what I've tried so far but gives the alert box, so it does not satisfactorily meet the requirement:
function isDescriptionPopulated() {
var desc = $("#description")
.val();
if (desc === "") {
return false;
} else {
return true;
}
}
window.addEventListener('beforeunload', function(e) {
if (isDescriptionPopulated()) {
e.preventDefault();
e.returnValue = undefined;
}
});
I am far from a Javascript expert, so I'm hoping maybe one of you can guide me in the right direction.
I am trying to click a button that gets rid of the container that is currently open and once the function is executed it clicks the next button for you.
I have already tried document.getElementById("rnaMedium").click(); but that did not work.
function disableLowHigh(){
//rna low events
document.getElementById('rnaLow').disabled = true;
document.getElementById('rnaLow').style.opacity = 0.10;
//rna medium events
document.getElementById('rnaMedium').enabled = true;
document.getElementById('rnaMedium').style.opacity = 1;
document.getElementById("rnaMedium").click()
document.getElementById("divID").remove();
}
I just need the button to be clicked. I know there is an easier way to do this but this is the way I want to do it currently.
as the given code above you did it the right way , but consider the following
but may be you do not have a function added for the button tag <button id="rnaMedium" onclick="your function"></button> ,
you have misspelled the button id,
what does the container that is currently open mean ? may by it pauses your function from completing execution.
I would like to keep a button grayed out (ie. non-clickable) until all javascript (client-side) validations are passed.
First of all, I have set the button's "Enabled" property to false, meaning it is greyed out by default when the page loads. And oppositely, here is some js code (we always like to see some code) that enables the button:
var SubmitButton = document.getElementById('<%=SubmitButton.ClientID %>');
SubmitButton.disabled = false;
I have a series of validations taking place in a javascript/jquery block on my page:
<script type="text/javascript">
//Client-Side validation script:
$(function () {
$("#<%=OtherBox.ClientID %>").blur(function () {
//Validation logic goes here...
});
//etc... there are many more.
});
</scipt>
I guess this is more of a javascript question than anything. How do I structure my javascript code to accomplish what I want to do here? In other words, how, when, and where should I set the disabled property of the button to false in my javascript?
One thought was to have a function at the end of my script, which contains all of the logic from each of my validations, and sets the button to be non-greyed out only if all of the logic passes. But using this method, there is no code reuse -- I would simply be copy pasting in all of the logic from each validation function into one mega function. Plus, it would only execute once, which is not good. The button should be able to be re-grayed-out if they change their input data to be invalid.
After thinking about this for a little while longer than I'd like to admit (such a simple problem :[) why don't I just create a loop at the end of my Javascript that is:
while(SubmitButton.disabled = true)
{
//Perform all validation logic from each validation function -- yes it is painful to reuse all of them again, but it is very straightforward.
//If all checks pass, then break out of the while loop by setting SubmitButton.disabled = false.
}
I realize this is likely a duplicate, but I've been googling/SOing for a day now and I can't find a satisfactory answer. If there is an answer already on SO, please send me there.
I have a client that insists on having an exit message popup confirming they want to exit the site, just like Gmail does. (I've already tried arguing against it. He is immovable, so no comments about how that is bad practice please.)
I've found this code:
<script>
window.onbeforeunload = function() {
return 'Are you sure you want to exit?';
}
<script>
But it runs no matter what I do - reloading the page, clicking on the nav, etc.
I just want the message to show up when the user closes the tab/browser. I suspect it's something simple I'm missing but I'm not a Javascript expert.
Any help would be greatly appreciated.
Thanks
EDIT
Here's what is working pretty good. Thanks to all!
var isLeavingSite = true;
//This would be called on each link/button click that navigates
$('a, input[type="submit"]').click(function(){
isLeavingSite = false;
});
window.onbeforeunload = function() {
if(isLeavingSite)
return 'Are you sure you want to exit?';
}
Though it could be a fair amount of work (depending on how your site is written), you could do something like this (pseudo-code):
var isLeavingSite = true;
//This would be called on each link/button click that navigates
function GlobalLinkHandler()
{
isLeavingSite = false;
}
window.onbeforeunload = function() {
if(isLeavingSite)
return 'Are you sure you want to exit?';
}
If you're using jQuery, you can use the code below to flip the isLeavingSite flag:
$('a, input[type="submit"]').click(function(){ isLeavingSite = false; });
What'll have to do is make use a variable that you set if any link is clicked on the site, then inside the onbeforeunload event check if that variable is set meaning they clicked a link or not set meaning they're closing the tab.
You can also use that variable to simple set the href of the link; that will allow you to then check what link they clicked on inside the onbeforeunload event and allow you to check if they're clicking on a link to go to another page on your site or clicking on an external link to another site.
If your using jQuery try this Confirm before exit
I want to check the value of a hidden field triggered by a "h ref onClick" javascript function. If it is"empty", I want to prompt the user to rate my page using a ratings form (thereby staying on the same page and ignoring the h ref target page. If the value is "rated", I want to simply allow the user progress to their intended page.
Here is some code I've developed so far but doesn't really work that well:
function ratings_prompt(){
var checkIfRated = document.getElementById("hidden_rating");
if (checkIfRated.value == "empty")
{
alert("The Field is set to empty - please rate the form!");
checkIfRated.value=="rated";
}
}
Edit: Sorry but I cannot seem to get all the code into the codeblock.
GF
can't really help out all that much w/out seeing more code and also you didn't really say what the problem is..."doesn't really work that well" is kind of vague...but basically you would have in your link onclick your function call, and you should pass a "this" reference to the function, and you should have return false; in your onclick as well. Then in your function, if the hidden field is not empty, do like location.href = that.href
link
<script type='text/javascript'>
function yourFunction(that) {
if (document.getElementById("hidden_rating").value != "empty") {
location.href = that.href;
} else {
// didn't rate
}
}
</script>