where does “docref” get defined? something is probably off with that
if you’re trying to add user and you don’t care about what the id will be, try:
db.collection("test").add({
first_name: first_name,
last_name: last_name
}).then(function(){
console.log("User saved!");
}).catch(function(error){
console.log("Error: ", error);
});
using .set() is for when you want to manually set an id, a la:
db.collection("test").doc("manually set id").set({...stuff})
Welcome! Three questions that might help:
Shouldn’t docref be db.collection("test").doc("test_user") since that’s what you end up geting? Ultimately, I assume you’ll want to set the doc ID dynamically, like ...doc(firstNameLastNameRandomNum) so you’ll need to save your set call to a variable, and then reference it via its .id — but right now, you’ve hardcoded it as 'test_user'
Is it possible that the data hasn’t been set at the time you made your get call? You might need to chain the get call as another then on the end. Otherwise, I don’t think your get will necessarily wait for your set to have finished. (I could be wrong!)
Finally, are you basing your example off of this Firebase doc? https://firebase.google.com/docs/firestore/manage-data/add-data#set_a_document If so, I’ve often found that the Firebase docs will use shorthand that came from an earlier doc, like db would have been defined somewhere earlier as firebase.firestore(), so you may want to backtrack through those to see if there was some implied context to the sample.
Good luck!
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?