I think this is a quite common question, but I haven't been able to find a working solution. I want the cursor to start spinning (cursor: wait) when the user clicks on the submit button for a form.
<button type="submit" class="save btn btn-grey" id="button">Gem</button>
This is the solution I have tried:
The problem is that the busy cursor disappears as soon as the user moves the mouse away from the button. I want the cursor to stay busy until the new page has loaded. (Submitting the forms leads to a new page)
2 Answers
Change the CSS class for whichever element you want it to appear over, probably body... to another class that contains:
cursor: wait
on submit (in this case with javascript / jquery).
Note: Body doesn't work in JS fiddle, but you can make a container div and test it out that way, I've modified the fiddle to give you an example.
Ie.
$("#button").click(function(){
$(".contain").addClass("wait");
$(this).addClass("wait");
});
You can bind an onsubmit event to the form. in the below example I have added an onclick on the submit button instead because stackoverflow doesn't support form's.
//onclick of submit button
document.getElementsByClassName('save')[0].onclick = function() {
//save element for the removing of the class after the timeout.
var elem = event.target;
//add classes to the html and clicked button.
event.target.className += " wait";
document.getElementsByTagName('html')[0].className += "wait";
//set timeout for removing the classes after 3 seconds.
window.setTimeout(function() {
elem.className -= " wait";
document.getElementsByTagName('html')[0].className -= "wait";
}, 3000);
}.wait {
cursor: wait;
}<button type="submit" class="save btn btn-grey" id="button">Gem</button>
