問題描述
數據未發布..幫助！html,js,firebase (Data not posting.. Help! html,js,firebase)
我正在嘗試將數據發佈到 firebase，但沒有發布。我嘗試使用 addEventListener 發布要發布的數據，但無濟於事。這是我的 html，帶有包含 firebase sdk 的外部 main.js：
<BODY>
<TABLE align="center">
<caption></caption>
<tr>
<td width=500 height=150 colspan=8 style="text‑align: center"><strong
style="font‑size:50">Add an Entry</strong></td>
</tr>
<tr>
<TD height=500 colspan=8>
<form id="info">
<table align="center">
<tr>
<td>Name:</td>
<th><INPUT type="text" Size="40" Maxlength="35"
Name="personal‑name" id="name" placeholder="Your Name Here">
</th>
</tr>
<tr>
<td>Email:</td>
<th><INPUT type="text" Size="40" Maxlength="40"
Name="personal‑email" id="email" placeholder="Your Email Here">
</th>
</tr>
<tr>
<td>Address:</td>
<th><textarea rows="5" width="550" type="text" Size="40"
Maxlength="40" Name="address" id="address"
placeholder="__"></textarea>
</th>
</tr>
</table>
<br>
<div align="center">
<button id="refresh">refresh</button>
<button id="addBtn" >submit</button>
</div>
</form>
</td>
</tr>
</Table>
</Body>
<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase‑app.js"></script>
<script src="main.js"></script> </BODY>
</code></pre>
這是我的 main.js：
// Firebase 配置，然後是 eventlistener
var firebaseConfig = {
apiKey: **,
authDomain: **,
databaseURL: **,
projectId: **,
storageBucket: **,
messagingSenderId: **,
appId: **,
measurementId: **,
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
form.addEventListener("submit", (e)=>{
e.preventDefault();
firebase.firestore().collection("information").add({
name:document.getElementById('name').value,
email:document.getElementById('email').value,
address:document.getElementById('address').value
})
});
</code></pre>
參考解法
方法 1:
4 things:
Make sure you define a form variable using the form's id
const form = document.getElementById("info");
You are missing the analytics and firestore sdk src (I included auth incase you plan to use it)
<!‑‑ Firebase App (the core Firebase SDK) is always required and must be listed first ‑‑>
<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase‑app.js"></script>
<!‑‑ If you enabled Analytics in your project, add the Firebase SDK for Analytics ‑‑>
<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase‑analytics.js"></script>
<!‑‑ Add Firebase products that you want to use ‑‑>
<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase‑auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase‑firestore.js"></script>
In your firebase console, change your database rules' conditional to true (if not already)
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
For performance, you should store your product initializations and collections in variables
const analytics = firebase.analytics();
const firestore = firebase.firestore();
const information = firestore.collection("information");
const form = document.getElementById("info");
form.addEventListener("submit", (e)=>{
e.preventDefault();
information.add({
name:document.getElementById('name').value,
email:document.getElementById('email').value,
address:document.getElementById('address').value
})
});
Alternatively, you can create a doc with a name for faster querying
information.doc(document.getElementById('name').value).set({
name:document.getElementById('name').value,
email:document.getElementById('email').value,
address:document.getElementById('address').value
})
(by W Jong、Pavlos Karalis)
參考文件