I couldn't add data from my form inputs to the Firestore collection and I can't find out what is the problem here

user_8928346 0
Viewed 93
<body>
    <div class="wrap-content5">
        <label for="itiName">Very Nice:</label><br><br>
        <form id="add-location-form">
            <input type="text" id="inputName" name="inputName" placeholder="Location Name"><br>
            <input type="text" id="inputLat" name="inputLat" placeholder="Latitude">
            <input type="text" id="inputLong" name="inputLong" placeholder="Longitude"><br>
            <button id="addLocation-btn" onclick="storeData()">Add</button>
        </form>
    </div>

I try to get the inputs and add it to the firestore collection here. Firestore collection name: location. I also leave the document id blank to allow it to generate automatically.

    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-firestore.js"></script>

    <script>
        // From Firebase Project settings
        var firebaseConfig = {
            apiKey: "",
            authDomain: "",
            databaseURL: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: "",
            measurementId: ""
        };

        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        const db = firebase.firestore();

    </script>

    <script>
        // app.js file for function storeData() from button onclick in html form
        function storeData() {

            var inputName = document.getElementById('inputName').value;
            var inputLat = document.getElementById('inputLat').value;
            var inputLong = document.getElementById('inputLong').value;

            db.collection('location').doc().set({
                name: inputName,
                lat: inputLat,
                long: inputLong
            })
            .then(function(docRef) {
                console.log("Document written with ID: ", docRef.id);
            })
            .catch(function(error) {
               console.error("Error adding document: ", error);
            });
        }
    </script>
   
</body> 
</html>

Firestore collection should look like this: https://imgur.com/gallery/eYJZakN

google-cloud-firestore firebase user-input html javascript
1 Answers

Your problem most probably comes from the fact that your form is submitted before the Firebase set() method is triggered.

As a matter of fact, you declare your button as follows:

<form id="add-location-form">
    // ...
    <button id="addLocation-btn" onclick="storeData()">Add</button>
</form>

i.e. without any type attribute.

As detailed in the W3 specification on button types, "the missing value default is the Submit Button state" and "if the type attribute is in the Submit Button state, the element is specifically a submit button".

So, if you add a button type to your button, as follows, it should solve your problem.

<button type="button" id="addLocation-btn" onclick="storeData()">Add</button>
user_33718620
Related