I use ajax for form submission so the webpage does not need to refresh or reload on submit.
I am trying to show a spinner and an alert only when the form gets submitted to let users know that their message has been submitted.
I already have the spinner where I want it to appear when the submit button is clicked but I do not know how to make it show only when the form gets submitted.
As for the alert, I have tried to implement it in the ajax but only the failure alert shows when something is wrong and the form isn't submitted.
The form just closes when it gets submitted successfully without letting the users know their message has been submitted.
I will appreciate any help on how to show the spinner and an alert only when the form gets submitted. Thanks.
Code below;
function openForm() {
document.getElementById("popupForm").style.display = "block";
}
function closeForm() {
document.getElementById("popupForm").style.display = "none";
}
function spinner() {
document.getElementById("spinner").style.display = "block";
}
function ajaxpost () {
// (A) GET FORM DATA
var form = document.getElementById("myForm");
var data = new FormData(form);
// (B) AJAX REQUEST
// (B1) POST DATA TO SERVER, RETURN RESPONSE AS TEXT
fetch("https://formsubmit.co/69b386256f5ab9111d636b4f38523dd6", { method:"POST", body:data })
.then(res=>res.text())
// (B2) SHOW MESSAGE ON SERVER RESPONSE
.then((response) => {
console.log(response);
if (response == "OK") { alert("SUCCESSFUL!"); }
else { alert("FAILURE!"); }
})
// (B3) OPTIONAL - HANDLE FETCH ERROR
.catch((err) => { console.error(err); });
// (C) PREVENT FORM SUBMIT
return false;
}* {
box-sizing: border-box;
}
.openBtn {
display: flex;
justify-content: left;
}
.openButton {
border: none;
border-radius: 5px;
background-color: #1c87c9;
color: white;
padding: 14px 20px;
cursor: pointer;
position: fixed;
}
.loginPopup {
position: relative;
text-align: center;
width: 100%;
}
.formPopup {
display: none;
position: fixed;
left: 45%;
top: 5%;
transform: translate(-50%, 5%);
border: 3px solid #999999;
z-index: 9;
}
.formContainer {
width: 400px;
max-width: 100%;
padding: 20px;
background-color: #fff;
height: 300px;
overflow: scroll;
}
.formContainer input[type=text],
.formContainer input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 20px 0;
border: none;
background: #eee;
}
.formContainer input[type=text]:focus,
.formContainer input[type=password]:focus {
background-color: #ddd;
outline: none;
}
.formContainer .btn {
padding: 12px 20px;
border: none;
background-color: #8ebf42;
color: #fff;
cursor: pointer;
width: 100%;
margin-bottom: 15px;
opacity: 0.8;
}
.formContainer .cancel {
background-color: #cc0000;
}
.formContainer .btn:hover,
.openButton:hover {
opacity: 1;
}
#spinner {
display: none;
}
.loading {
border: 2px solid #ccc;
width: 60px;
height: 60px;
border-radius: 50%;
border-top-color: #1ecd97;
border-left-color: #1ecd97;
animation: spin 1s infinite ease-in;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div >
<button onclick="openForm()"><strong>Open Form</strong></button>
<div >
<div id="popupForm">
<form class='formContainer' id='myForm' onsubmit='return ajaxpost()'>
<h2>Please Fill The Form</h2>
<label for="email">
<strong>E-mail</strong>
</label>
<input type="text" id="email" placeholder="Your Email" name="email" required>
<br/>
<center> <div id="spinner" ></div></center><br/>
<button type="submit" onclick="spinner()" >Log in</button>
<button type="button" onclick="closeForm()">Close</button>
</form>
</div>
</div>CodePudding user response：
You have to change part of your code like below:
I have mark ** as new code to place in code and describe what exactly I do
You can use that mark to know what is the new code I have write
function openForm() {
document.getElementById("popupForm").style.display = "block";
}
function closeForm() {
document.getElementById("popupForm").style.display = "none";
}
function spinner() {
document.getElementById("spinner").style.display = "block";
}
function hideSpinner() { // **
document.getElementById("spinner").style.display = "none";
}
function ajaxpost() {
// (A) GET FORM DATA
var form = document.getElementById("myForm");
var data = new FormData(form);
spinner(); // ** Show spinner
// (B) AJAX REQUEST
// (B1) POST DATA TO SERVER, RETURN RESPONSE AS TEXT
fetch("https://formsubmit.co/69b386256f5ab9111d636b4f38523dd6", {
method: "POST",
body: data
})
// (B2) SHOW MESSAGE ON SERVER RESPONSE
.then((response) => {
// ** main point is use response.ok as condition that can know response is success or not precisely
if (response.ok) { // ** response have ok property that is a boolean if response success it will be true
alert("SUCCESSFUL!");
hideSpinner(); // ** hide spinner
} else {
alert("FAILURE!");
hideSpinner(); // ** hide spinner
}
})
// (B3) OPTIONAL - HANDLE FETCH ERROR
.catch((err) => {
console.error(err);
});
// (C) PREVENT FORM SUBMIT
return false;
}* {
box-sizing: border-box;
}
.openBtn {
display: flex;
justify-content: left;
}
.openButton {
border: none;
border-radius: 5px;
background-color: #1c87c9;
color: white;
padding: 14px 20px;
cursor: pointer;
position: fixed;
}
.loginPopup {
position: relative;
text-align: center;
width: 100%;
}
.formPopup {
display: none;
position: fixed;
left: 45%;
top: 5%;
transform: translate(-50%, 5%);
border: 3px solid #999999;
z-index: 9;
}
.formContainer {
width: 400px;
max-width: 100%;
padding: 20px;
background-color: #fff;
height: 300px;
overflow: scroll;
}
.formContainer input[type=text],
.formContainer input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 20px 0;
border: none;
background: #eee;
}
.formContainer input[type=text]:focus,
.formContainer input[type=password]:focus {
background-color: #ddd;
outline: none;
}
.formContainer .btn {
padding: 12px 20px;
border: none;
background-color: #8ebf42;
color: #fff;
cursor: pointer;
width: 100%;
margin-bottom: 15px;
opacity: 0.8;
}
.formContainer .cancel {
background-color: #cc0000;
}
.formContainer .btn:hover,
.openButton:hover {
opacity: 1;
}
#spinner {
display: none;
}
.loading {
border: 2px solid #ccc;
width: 60px;
height: 60px;
border-radius: 50%;
border-top-color: #1ecd97;
border-left-color: #1ecd97;
animation: spin 1s infinite ease-in;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<div >
<button onclick="openForm()"><strong>Open Form</strong></button>
<div >
<div id="popupForm">
<form class='formContainer' id='myForm' onsubmit='return ajaxpost()'>
<h2>Please Fill The Form</h2>
<label for="email">
<strong>E-mail</strong>
</label>
<input type="text" id="email" placeholder="Your Email" name="email" required>
<br />
<center>
<div id="spinner" ></div>
</center><br />
<button type="submit" onsubmit="ajaxpost()">Log in</button> <!--- ** change to sumbit and call ajaxpost -->
<button type="button" onclick="closeForm()">Close</button>
</form>
</div>
</div>