CODEWITHSUNDEEP
javascriptfirebasegoogle-cloud-firestore
Dos
Dos

Reputation: 174

I am trying to save form data to cloud Firestore

I am trying to save form data to cloud Firestore. Using the following link - https://firebase.google.com/docs/firestore/manage-data/add-data

I have already set up Firebase, and I keep getting errors when following the documentation.

const profileForm = document.querySelector('#form');
const fName = document.querySelector('#fname');
const btn = document.querySelector('#submit');

btn.addEventListener('click', (e) => {
  e.preventDefault();

  /** Saving the data to the database **/            
   db.collection('profileForm').doc('contactProfile').set( {
      fName: fname.value
   }).then(() => {
       profileForm.reset();
    }).catch(err => {
       console.log(err);
    });
});
<section class="container">
  <h1>Cloud Cafe</h1>
  <div class="content">
    <form id="profileForm">
      <input type="text" name="fName" id="fName" placeholder="Cafe Name">
      <button type="submit" id="submit">Submit</button>
    </form>
  </div>
</section>

I keep getting the following error even though in my file I have called the following function


    import {getFirestore, doc, setDoc, collection, addDoc} from "firebase/firestore";
    const db = getFirestore(app);

enter image description here

The data is not saved to Firestore

Upvotes: 0

Views: 971

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598740

Given your imports you are trying to use the new v9 syntax. In that syntax, most features are available as top-level functions, rather than as methods on the Firestore object.

So to get a document from a collection, you'd do:

setDoc(doc(db, 'profileForm', 'contactProfile'), {
   fName: fname.value
})...

Also see the Firebase documentation on writing data to a document.

Upvotes: 2

Related Questions