我无法将表单输入中的数据添加到 Firestore 集合中，也无法找出问题所在答案

【问题标题】：I couldn't add data from my form inputs to the Firestore collection and I can't find out what is the problem here我无法将表单输入中的数据添加到 Firestore 集合中，也无法找出问题所在
【发布时间】：2021-02-14 05:23:43
【问题描述】：

<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>

我尝试获取输入并将其添加到此处的 firestore 集合中。 Firestore 集合名称：位置。我还将文档 ID 留空以允许它自动生成。

    <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 集合应如下所示：https://imgur.com/gallery/eYJZakN

【问题讨论】：

标签： javascript html firebase google-cloud-firestore user-input

【解决方案1】：

您的问题很可能是因为您的表单是在 Firebase set() 方法被触发之前提交的。

事实上，你声明你的按钮如下：

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

即没有任何type属性。

如W3 specification关于按钮类型的详细说明，“缺失值默认为Submit Button状态”和“如果type属性处于Submit Button状态，则元素具体是一个submit 按钮”。

所以，如果你给你的按钮添加一个按钮类型，如下，它应该可以解决你的问题。

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

【讨论】：