'Firebase catch not returning false before HTML form submits
I think it's the async flow thats getting me. "return false" lines of code work except the ones that hit in the catch of the firebase code.
For example where I console.log "here 7" at the bottom where good = 0 if the title or desc is too long, that returns false correctly and prevents submit. But if there's a database error on the firebase set or the lookup (here 5 or here 6), it does not return false and continues to submit and go to the action.
I built this using answers to some other questions I found here, but I obviously did it wrong.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="top">
<h1>ADMIN PANEL</h1>
</div>
<form class="inputFields" action="upload.php" onsubmit="return addDeal(event);" method="post" enctype="multipart/form-data">
<div class="wholeOption">
<label for="fileToUpload">Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload" disabled>
</label>
</div>
<div class="wholeOption">
<label for="title">Title:
<input type="text" id="title" name="title" style="width: 200px;"></input>
</label>
</div>
<div class="wholeOption">
<label for="desc">Description:
<textarea id="desc" name="desc" cols="40" rows="1"></textarea>
</label>
<div class="smallDetails">
<p class="special">(Does the code only work on certain options? Any exclusions or fine print the buyer needs to know? Put that here.)</p>
</div>
</div>
<div class="processdeals">
<input type="submit" class="submit" value="ADD DEAL" name="submit">
</div>
</form>
<div class="results">
<h2>Results: </h2>
<p id="message" class="message"></p>
<p class="errors" id="errors"></p>
</div>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: xxx,
authDomain: xxx,
databaseURL: xxx,
projectId: xxx,
storageBucket: xxx,
messagingSenderId: xxx,
appId: xxx,
measurementId: xxx
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
var uid = user.uid;
} else {
// User is signed out
// ...
//window.location = '../login.html';
}
});
function addDeal(e){
let good = 1;
document.getElementById("errors").innerHTML = '';
let title = document.getElementById("title").value;
let desc = document.getElementById("desc").value;
let imageUpload = document.getElementById("fileToUpload").value;
if (desc.length > 70){
good = 0;
document.getElementById("errors").innerHTML += "Description must be no more than 70 characters. Please shorten and resubmit.";
}
title=title.trim();
if (title.length > 50){
good = 0;
document.getElementById("errors").innerHTML += "Title too long. 50 characters max.";
}
let postDate= Date.now();
if (good){
return lookupDeal(title)
.then((snapshot) => {
if (snapshot.hasChildren()) {
document.getElementById("message").innerHTML = "Deal NOT added. Duplicate.";
return false;
}
firebase.database().ref('deals/' + postDate).set({
"desc" : finalDesc,
"title" : title,
})
.then(()=>{
document.getElementById("message").innerHTML = "Deal added successfully! ID: " + title;
console.log('here 4');
return true;
})
.catch((error)=>{
document.getElementById("message").innerHTML = "Database error. " + error;
console.log('here 5 error: ' + error);
return false;
})
})
.catch((error)=>{
document.getElementById("message").innerHTML = "Database error2 " + error;
console.log('here 6 error: ' + error);
return false;
});
} else {
document.getElementById("message").innerHTML = "Deal NOT added. See errors below.";
console.log('here 7');
return false;
}
}
function lookupDeal(title) {
return firebase.database().ref('deals').orderByChild('title').equalTo(`${title}`).once('value');
}
</script>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|