Getting familiar with updating a Firestore database using an html form. When I hardcode .setoutside of the event listener, it updates the database but when I try to do the exact same thing inside the event listener I get these errors that they can't reach Cloud Firestore backend and that XMLHTTPRequest cannot load the site due to access control rights. I have it set so that anyone can access the database so I don't understand why it's not working.
document.getElementById("pushMe").addEventListener("click", function submitForm(){
let first_name = document.getElementById("firstname").value;
let last_name = document.getElementById("lastname").value;
console.log(first_name, last_name);
docref.set({
first_name: first_name,
last_name: last_name
}, { merge: true }).then(function(){
console.log("User saved!");
}).catch(function(error){
console.log("Error: ", error);
});
db.collection("test").doc("test_user").get().then(function(doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
console.log("GOODBYE!");
});
Here is the event listener code that I am trying to use. When I take the decree.set chunk out of this function, it updates the database just as it's supposed to. We have an html form and we want it to submit on clicking the submit button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/firebasejs/7.7.0/firebase-firestore.js"></script>
</head>
<body>
<h2>HTML Forms</h2>
<form id="submit1">
First name:<br>
<input id= "firstname" type="text" name="firstname">
<br>
<input id= "lastname" type="text" name="lastname">
<br><br>
<button type="submit" id="pushMe"> Submit! </button>
</form>
<script type="text/javascript" src="web_app_test.js"></script>
</body>
</html>
Has anyone else encountered these issues?
