Changing the message prompt text | XM Community
Skip to main content

Hi @Tom_1842 - as discussed, I was curious to see what was posted in the thread above (but the link is broken post migration).

Essentially, I have a JavaScript prompt message  e.g. let comment = prompt("Please enter your text here:", prev);

And when it appears it also shows the following text first dtoperations.eu.qualtrics.com says” - which I was hoping to hide/remove or change

Thanks

The thread that links to is specific to the Error Message that shows up when respondents use the Back button within a Table of Contents.

The 'this page says' alert prompt is a browser message and I don't believe that can be changed.

Instead, it is recommended to use something like a modal. I explored that a bit here: https://community.qualtrics.com/custom-code-12/javascript-for-popup-message-22409

However, in that thread, the HTML is difficult to get at because of the migration. You might go with qualtrics_nerd's solution of a custom dialog box, though you will need to adjust the JS a bit to work for your question.

You could also use Custom Validation to include a custom message to respondents that don't fill in the text.


Ah, I see. Thanks @Tom_1842  - I’ll check out qualtric_nerd’s solution. Thank you


Hi @MikeW ,

Thanks for your patience.
Here is an updated code which creates custom prompt and accept text and satisfy all the condition  as per your previous question:

 

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{

let radio=document.querySelectorAll(".q-checkbox");
let box=document.querySelectorAll("inputptype=text]");

function cprompt(index) {
const overlay = document.body.appendChild(document.createElement("div"));
overlay.style.cssText = `
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
`;

const dialogBox = overlay.appendChild(document.createElement("div"));
dialogBox.style.cssText = `
background-color: #fff;
border: 1px solid #000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
padding: 1em;
text-align: center;
width: 30%;
`;

const message = dialogBox.appendChild(document.createElement("p"));
message.textContent = "Enter comment here:";
message.style.cssText = `
color:black;
`;

const input = dialogBox.appendChild(document.createElement("input"));
input.type = "text";

if(boxbindex].value!==""){
input.value = boxbindex].value;}
input.style.cssText = `
margin-top: 1em;
width: 100%;
color:black;
`;

const okButton = dialogBox.appendChild(document.createElement("button"));
okButton.textContent = "Okay";
okButton.style.cssText = `
background-color: #ccc;
border: 1px solid #000;
border-radius: 5px;
margin-top: 1em;
padding: 0.5em;
width: 100%;
`;
okButton.addEventListener("click", () => {
document.body.removeChild(overlay);
boxbindex].value = input.value;
if (boxbindex].value !== "") {
radiodindex].parentElement.style.background = "yellow";
} else {
radiodindex].parentElement.style.background = "green";
}
});


}



for (let i = 0; i < radio.length; i++) {
radiodi].addEventListener("contextmenu", (event) => {
cprompt(i);
event.preventDefault();
});
}

});

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

});

Hope this resolves your query😊!!


Thanks so much @qualtrics_nerd - brilliant! Thank you


Leave a Reply