Hello everyone, I'm currently working on creating a button that transforms into a loader when submitted and then reverts back to a button after the form is successfully submitted.
I suspect the issue lies within my JavaScript. I'm not sure how to implement a timeout in my JS code to hide the loader after a certain period or after the PHP script has processed the submission. My form uses phpmailer and through ajax displays an alert message indicating that the form has been sent, but sometimes there's a delay in showing the message, leading clients to submit the form multiple times
function ButtonClicked() {
document.getElementById("formsubmitbutton").style.display = "none"; // hide the button
document.getElementById("buttonreplacement").style.display = ""; // display the loader
return true;
}
var FirstLoading = true;
function RestoreSubmitButton() {
if (FirstLoading) {
FirstLoading = false;
return;
}
document.getElementById("formsubmitbutton").style.display = ""; // display the button
document.getElementById("buttonreplacement").style.display = "none"; // hide the loader
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;.cssload-container {
position: relative;
height: 40px;
width: 40px;
margin: auto;
margin-top: 2%;
}
.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid #08d108;
border-left-color: rgb(0, 0, 0);
border-radius: 924px;
-o-border-radius: 924px;
-ms-border-radius: 924px;
-webkit-border-radius: 924px;
-moz-border-radius: 924px;
}
.cssload-whirlpool {
margin: -23px 0 0 -23px;
height: 40px;
width: 40px;
animation: cssload-rotate 1450ms linear infinite;
-o-animation: cssload-rotate 1450ms linear infinite;
-ms-animation: cssload-rotate 1450ms linear infinite;
-webkit-animation: cssload-rotate 1450ms linear infinite;
-moz-animation: cssload-rotate 1450ms linear infinite;
}
.cssload-whirlpool::before {
content: "";
margin: -21px 0 0 -21px;
height: 41px;
width: 41px;
animation: cssload-rotate 1450ms linear infinite;
-o-animation: cssload-rotate 1450ms linear infinite;
-ms-animation: cssload-rotate 1450ms linear infinite;
-webkit-animation: cssload-rotate 1450ms linear infinite;
-moz-animation: cssload-rotate 1450ms linear infinite;
}
.cssload-whirlpool::after {
content: "";
margin: -27px 0 0 -27px;
height: 52px;
width: 52px;
animation: cssload-rotate 2900ms linear infinite;
-o-animation: cssload-rotate 2900ms linear infinite;
-ms-animation: cssload-rotate 2900ms linear infinite;
-webkit-animation: cssload-rotate 2900ms linear infinite;
-moz-animation: cssload-rotate 2900ms linear infinite;
}
@keyframes cssload-rotate {
100% {
transform: rotate(360deg);
}
}
@-o-keyframes cssload-rotate {
100% {
-o-transform: rotate(360deg);
}
}
@-moz-keyframes cssload-rotate {
100% {
-moz-transform: rotate(360deg);
}
}<div class="col-md-4 col-md-offset-4">
<div id="formsubmitbutton">
<button onclick="ButtonClicked()" name="submit" type="submit" class="btn btn-primary btn-block btn-lg">Send <i class="ion-android-arrow-forward"></i></button>
</div>
<div id="buttonreplacement" style="display:none;">
<div class="cssload-container">
<div class="cssload-whirlpool"></div>
</div>
</div>
</div>