javascript - 为什么我的数据没有从这个 javascript 代码发送到 firebase？
问题描述
这是我的反馈页面的代码。它的目的是从患者那里获得反馈。我面临的问题是数据没有被发送到火力基地。我曾尝试在另一个页面上使用类似的代码，它运行良好，但即使在开始时它也没有工作，尽管一次又一次地部署网站，最终在我输入后它工作console.log()。其次，提交按钮应该重定向到index.html但它不起作用。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>star-rating</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/feedback.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<svg style="display: none"><symbol id="star" viewBox="0 0 1024 1024"><polygon points="512 0 627 354
999 354 698 572 813 926 512 708 211 926 326 572 25 354 397 354 512 0"/></symbol></svg>
<div id="modal">
<div class="overlay">
<div class="feedback container--small align--center">
<a href="index.html">
<button id="close">Close</button>
</a>
<h1 class="feedback__title">Patient Feedback</h1>
<p class="feedback__description">Please let us know how our service was. It will really
help us to keep improving our service!</p>
<form class="feedback_form">
<table style="width:100%">
<tr>
<td>
<label>MR Number</td> <td> <input type="text" name="mrnum" id="mrnum" placeholder="Enter
MR Number" required></label>
</td>
</tr>
<tr>
<td>
<label>Department</td> <td> <input type="text" name="dept" id="dept" pattern="[A-Za-z]
{1,25}" placeholder="Enter Department" required></label>
</td>
</tr>
<tr>
<td>
<label>Doctor Name</td> <td> <input type="text" name="doc" id="doc" pattern="[A-Za-z]
{1,25}" placeholder="Enter Doc Name" required></label>
</td>
</tr>
</table>
<fieldset class="rating registration.attitude">
<table style="width:100%">
<tr>
<th>Registration</th>
<th>Rating</th>
</tr>
<tr>
<td>
<legend>Attitude of staff</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="regAtt-5" name="rating__regAtt" value="5">
<label for="regAtt-5"><svg><title>Five Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="regAtt-4" name="rating__regAtt" value="4">
<label for="regAtt-4"><svg><title>Four Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="regAtt-3" name="rating__regAtt" value="3">
<label for="regAtt-3"><svg><title>Three Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="regAtt-2" name="rating__regAtt" value="2">
<label for="regAtt-2"><svg><title>Two Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="regAtt-1" name="rating__regAtt" value="1">
<label for="regAtt-1"><svg><title>One Star</title><use xlink:href="#star">
</use></svg></label>
</td>
</div>
</tr>
</fieldset>
<fieldset class="rating registration.info">
<tr>
<td>
<legend>Information and Assistance</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="regInfo-5" name="rating__regInfo" value="5">
<label for="regInfo-5"><svg><title>Five Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="regInfo-4" name="rating__regInfo" value="4">
<label for="regInfo-4"><svg><title>Four Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="regInfo-3" name="rating__regInfo" value="3">
<label for="regInfo-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="regInfo-2" name="rating__regInfo" value="2">
<label for="regInfo-2"><svg><title>Two Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="regInfo-1" name="rating__regInfo" value="1">
<label for="regInfo-1"><svg><title>One Star</title><use xlink:href="#star">
</use></svg></label>
</div>
</td>
</tr>
<fieldset class="rating registration.process">
<tr>
<td>
<legend>Registration process</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="regreg-5" name="rating__regreg" value="5">
<label for="regreg-5"><svg><title>Five Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="regreg-4" name="rating__regreg" value="4">
<label for="regreg-4"><svg><title>Four Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="regreg-3" name="rating__regreg" value="3">
<label for="regreg-3"><svg><title>Three Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="regreg-2" name="rating__regreg" value="2">
<label for="regreg-2"><svg><title>Two Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="regreg-1" name="rating__regreg" value="1">
<label for="regreg-1"><svg><title>One Star</title><use xlink:href="#star">
</use></svg></label>
</div>
</td>
</tr>
</table>
</fieldset>
<fieldset class="rating vitals.attitude">
<table style="width:100%">
<tr>
<th>Vitals</th>
<th>Rating</th>
</tr>
<tr>
<td>
<legend>Attitude of staff</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="vitAtt-5" name="rating__vitAtt" value="5">
<label for="vitAtt-5"><svg><title>Five Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="vitAtt-4" name="rating__vitAtt" value="4">
<label for="vitAtt-4"><svg><title>Four Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="vitAtt-3" name="rating__vitAtt" value="3">
<label for="vitAtt-3"><svg><title>Three Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="vitAtt-2" name="rating__vitAtt" value="2">
<label for="vitAtt-2"><svg><title>Two Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="vitAtt-1" name="rating__vitAtt" value="1">
<label for="vitAtt-1"><svg><title>One Star</title><use xlink:href="#star">
</use></svg></label>
</td>
</div>
</tr>
</fieldset>
<fieldset class="rating vitals.info">
<tr>
<td>
<legend>Information and Assistance</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="vitals_info-5" name="rating__vitals_info" value="5">
<label for="vitals_info-5"><svg><title>Five Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="vitals_info-4" name="rating__vitals_info" value="4">
<label for="vitals_info-4"><svg><title>Four Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="vitals_info-3" name="rating__vitals_info" value="3">
<label for="vitals_info-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="vitals_info-2" name="rating__vitals_info" value="2">
<label for="vitals_info-2"><svg><title>Two Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="vitals_info-1" name="rating__vitals_info" value="1">
<label for="vitals_info-1"><svg><title>One Star</title><use
xlink:href="#star"></use></svg></label>
</div>
</td>
</tr>
<fieldset class="rating vitals.process">
<tr>
<td>
<legend>Vitals process</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="vitals_process-5" name="rating__vitals_process"
value="5">
<label for="vitals_process-5"><svg><title>Five Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="vitals_process-4" name="rating__vitals_process"
value="4">
<label for="vitals_process-4"><svg><title>Four Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="vitals_process-3" name="rating__vitals_process"
value="3">
<label for="vitals_process-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="vitals_process-2" name="rating__vitals_process"
value="2">
<label for="vitals_process-2"><svg><title>Two Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="vitals_process-1" name="rating__vitals_process"
value="1">
<label for="vitals_process-1"><svg><title>One Star</title><use
xlink:href="#star"></use></svg></label>
</div>
</td>
</tr>
</table>
</fieldset>
<fieldset class="rating doc.waittime">
<table style="width:100%">
<tr>
<th>Consultant/ Doctor</th>
<th>Rating</th>
</tr>
<tr>
<td>
<legend>Waiting Time</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="doc_waittime-5" name="rating__doc_waittime"
value="5">
<label for="doc_waittime-5"><svg><title>Five Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_waittime-4" name="rating__doc_waittime"
value="4">
<label for="doc_waittime-4"><svg><title>Four Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_waittime-3" name="rating__doc_waittime"
value="3">
<label for="doc_waittime-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_waittime-2" name="rating__doc_waittime"
value="2">
<label for="doc_waittime-2"><svg><title>Two Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_waittime-1" name="rating__doc_waittime"
value="1">
<label for="doc_waittime-1"><svg><title>One Star</title><use
xlink:href="#star"></use></svg></label>
</td>
</div>
</tr>
</fieldset>
<fieldset class="rating doc.attitude">
<tr>
<td>
<legend>Attitude and Counselling</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="doc_attitude-5" name="rating__doc_attitude"
value="5">
<label for="doc_attitude-5"><svg><title>Five Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_attitude-4" name="rating__doc_attitude"
value="4">
<label for="doc_attitude-4"><svg><title>Four Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_attitude-3" name="rating__doc_attitude"
value="3">
<label for="doc_attitude-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_attitude-2" name="rating__doc_attitude"
value="2">
<label for="doc_attitude-2"><svg><title>Two Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_attitude-1" name="rating__doc_attitude"
value="1">
<label for="doc_attitude-1"><svg><title>One Star</title><use
xlink:href="#star"></use></svg></label>
</div>
</td>
</tr>
<fieldset class="rating doc.rating">
<tr>
<td>
<legend>Overall Doctor Rating</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="doc_rating-5" name="rating__doc_rating" value="5">
<label for="doc_rating-5"><svg><title>Five Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_rating-4" name="rating__doc_rating" value="4">
<label for="doc_rating-4"><svg><title>Four Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_rating-3" name="rating__doc_rating" value="3">
<label for="doc_rating-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_rating-2" name="rating__doc_rating" value="2">
<label for="doc_rating-2"><svg><title>Two Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="doc_rating-1" name="rating__doc_rating" value="1">
<label for="doc_rating-1"><svg><title>One Star</title><use
xlink:href="#star"></use></svg></label>
</div>
</td>
</tr>
</table>
</fieldset>
<fieldset class="rating lab.waittime">
<table style="width:100%">
<tr>
<th>Laboratory/Pharmacy</th>
<th>Rating</th>
</tr>
<tr>
<td>
<legend>Attitude and Guidance</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="lab_waittime-5" name="rating__lab_waittime"
value="5">
<label for="lab_waittime-5"><svg><title>Five Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="lab_waittime-4" name="rating__lab_waittime"
value="4">
<label for="lab_waittime-4"><svg><title>Four Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="lab_waittime-3" name="rating__lab_waittime"
value="3">
<label for="lab_waittime-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="lab_waittime-2" name="rating__lab_waittime"
value="2">
<label for="lab_waittime-2"><svg><title>Two Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="lab_waittime-1" name="rating__lab_waittime"
value="1">
<label for="lab_waittime-1"><svg><title>One Star</title><use
xlink:href="#star"></use></svg></label>
</td>
</div>
</tr>
</fieldset>
<fieldset class="rating lab.delivery">
<tr>
<td>
<legend>Delivery and Availability of medicine</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="lab_delivery-5" name="rating__lab_delivery"
value="5">
<label for="lab_delivery-5"><svg><title>Five Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="lab_delivery-4" name="rating__lab_delivery"
value="4">
<label for="lab_delivery-4"><svg><title>Four Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="lab_delivery-3" name="rating__lab_delivery"
value="3">
<label for="lab_delivery-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="lab_delivery-2" name="rating__lab_delivery"
value="2">
<label for="lab_delivery-2"><svg><title>Two Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="lab_delivery-1" name="rating__lab_delivery"
value="1">
<label for="lab_delivery-1"><svg><title>One Star</title><use
xlink:href="#star"></use></svg></label>
</div>
</td>
</tr>
</table>
<fieldset class="rating environment.interior">
<table style="width:100%">
<tr>
<th>Environment</th>
<th>Rating</th>
</tr>
<tr>
<td>
<legend>Interior/ Directions</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="env_interior-5" name="rating__env_interior"
value="5">
<label for="env_interior-5"><svg><title>Five Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="env_interior-4" name="rating__env_interior"
value="4">
<label for="env_interior-4"><svg><title>Four Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="env_interior-3" name="rating__env_interior"
value="3">
<label for="env_interior-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="env_interior-2" name="rating__env_interior"
value="2">
<label for="env_interior-2"><svg><title>Two Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="env_interior-1" name="rating__env_interior"
value="1">
<label for="env_interior-1"><svg><title>One Star</title><use
xlink:href="#star"></use></svg></label>
</td>
</div>
</tr>
</fieldset>
<fieldset class="rating environment.temp">
<tr>
<td>
<legend>Temperature</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="env_temp-5" name="rating__env_temp" value="5">
<label for="env_temp-5"><svg><title>Five Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="env_temp-4" name="rating__env_temp" value="4">
<label for="env_temp-4"><svg><title>Four Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="env_temp-3" name="rating__env_temp" value="3">
<label for="env_temp-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="env_temp-2" name="rating__env_temp" value="2">
<label for="env_temp-2"><svg><title>Two Stars</title><use xlink:href="#star">
</use></svg></label>
<input type="radio" id="env_temp-1" name="rating__env_temp" value="1">
<label for="env_temp-1"><svg><title>One Star</title><use xlink:href="#star">
</use></svg></label>
</div>
</td>
</tr>
<fieldset class="rating environment.clean">
<tr>
<td>
<legend>Cleaniness</legend>
</td>
<td>
<div class="flex-container" required>
<input type="radio" id="env_clean-5" name="rating__env_clean" value="5">
<label for="env_clean-5"><svg><title>Five Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="env_clean-4" name="rating__env_clean" value="4">
<label for="env_clean-4"><svg><title>Four Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="env_clean-3" name="rating__env_clean" value="3">
<label for="env_clean-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="env_clean-2" name="rating__env_clean" value="2">
<label for="env_clean-2"><svg><title>Two Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="env_clean-1" name="rating__env_clean" value="1">
<label for="env_clean-1"><svg><title>One Star</title><use xlink:href="#star">
</use></svg></label>
</div>
</td>
</tr>
</table>
</fieldset>
<fieldset class="rating rating__experience" required>
<legend>How would you rate your overall experience?</legend>
<div class="flex-container">
<input type="radio" id="experience-5" name="rating__experience" value="5">
<label for="experience-5"><svg><title>Five Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="experience-4" name="rating__experience" value="4">
<label for="experience-4"><svg><title>Four Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="experience-3" name="rating__experience" value="3">
<label for="experience-3"><svg><title>Three Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="experience-2" name="rating__experience" value="2">
<label for="experience-2"><svg><title>Two Stars</title><use
xlink:href="#star"></use></svg></label>
<input type="radio" id="experience-1" name="rating__experience" value="1">
<label for="experience-1"><svg><title>One Stars</title><use
xlink:href="#star"></use></svg></label>
</div>
</fieldset>
<a href="index.html">
<button type="submit" feedbackSubmit()>Submit</button>
</a>
</form>
</div>
</div>
</div>
<script src="js/submit.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js"></script>
</body>
</html>
现在我只是想检查数据是否正在发送到firebase，所以这是我在javascript中使用的代码。
firebase.initializeApp(firebaseConfig);
//firebase.analytics();
const formMessage = firebase.database().ref().child('FeedbackObj');
document
.getElementById('feedback_form')
.addEventListener('submit', formSubmit);
//document.getElementById('appointmentForm').addEventListener('submit', formSubmit);
//Submit form
function feedbackSubmit()//e)
{
//e.preventDefault();
// Get Values from the DOM
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
sendMessage(date,time);
console.log("Data saved successfully.");
document.querySelector('.alert').style.display = 'block';
//Hide Alert Message After Seven Seconds
setTimeout(function() {document.querySelector('.alert').style.display = 'none';
}, 7000);
document.getElementById('feedback_form').reset();
}
function sendMessage(date,time)
{
let newFormMessage = formMessage.push();
console.log("Data saved successfully.");
newFormMessage.set({
Dated: date,
Time:time
});
}
但即使在一次又一次地部署网站之后，它仍然不会发送数据。并且提交按钮不会重定向回“index.html”。我的数据库规则允许写入数据。
解决方案
您的文件中有一些错误。
'<head>'您必须在 html 的标签之间添加您需要使用的 firebase 产品。代码：<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-database.js"></script>您正在寻找
IdHtml 中不存在的元素。您必须将 id 属性添加到'form'标签。代码：<form id="feedback_form" class="feedback_form">'pattern'您在使用该字段的属性时遇到问题'Department'。它不能在引号内包含空格。一定是这样。代码：pattern="[\w]{1,25}"您在 html 中有错误，打开和关闭标签时，它们不匹配。你应该对此多加注意。代码：
<div> ... content ... </div>您必须选择提交的方式。通过
'addEventListener', 或通过onclick="myFunction()"html 的属性。您可以在此处查看示例：示例当您尝试为元素分配样式时
'.alert'，您会收到错误，搜索返回null。这些错误会阻止您的代码正常运行。
最后，按照 Firebase 数据库文档中的步骤操作：Firebase 数据库读写
代码看起来
Firebase 数据库：Firebase 数据库中存储的数据的样子
HTML 代码：
<head>
...
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-database.js"></script>
...
</head>
<body>
...
<form id="feedback_form" class="feedback_form">
...
<!-- If you want to redirect to "index.html", you can do it in .js, after typing in Firebase. -->
<button type="submit">Submit</button>
</form>
...
<script src="js/submit.js"></script>
</body>
JS代码：
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Get a reference to the database service
var database = firebase.database();
/* Add to Database */
function sendToDatabase(date,time) {
database.ref('feedbackObj').set({
date: date,
time: time
});
}
/* Submit Comment Function */
function submitComment(event) {
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
sendToDatabase(date, time);
form.reset();
event.preventDefault();
}
const form = document.getElementById('feedback_form');
form.addEventListener('submit', submitComment);
推荐阅读
- python-3.x - 无法在 Mac M1 上安装 pandas 和其他 python 库
- r - 如何使用 dplyr 检测字符串中字符的位置
- discord - 当提示“= heist roleid”时，如何让我的机器人向指定的角色 id 授予发送消息权限
- java - 为什么json解析器程序找不到数组？
- material-ui - 无法在主题中获取自定义断点
- rest - 如何在 FrontApp API 调用中使用日期过滤器获取特定时间段的数据
- javascript - 尝试创建关卡排行榜时，Leaderboard.map 不是函数
- c++ - google mock 是如何实现的
- flutter - 谷歌地图无法在 Flutter 中使用 URL 启动器打开
- java - 处理 HttpUrlConnection 超时