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

Question

<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

Answer 1

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

事实上，您按如下方式声明按钮：

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

即没有任何type属性。

在按钮类型的W3 specification中有详细说明，“缺失值默认为提交按钮状态”和“如果类型属性处于提交按钮状态，则该元素具体为提交按钮。

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

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

我无法将我的表单输入中的数据添加到 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

html

javascript

user-input

firebase

google-cloud-firestore