为什么我的数据没有从这个javascript代码发送到firebase呢？
为什么我的数据没有从这个javascript代码发送到firebase呢？
提问于 2020-06-08 21:20:36
这是我的反馈页面的代码。它的目的是从我所面临的patients.The问题中得到反馈，因为数据没有被发送到防火墙。我尝试过在另一个页面上使用类似的代码，它非常有效，但是即使在最初，它也没有工作，尽管我一次又一次地部署了这个网站，并且在我输入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“。我的数据库规则允许写入数据。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-08 23:53:24
您的文件中有一些错误。
- 您必须在html的
'<head>'标记之间添加所需的firebase产品。代码：<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-database.js"></script> - 您正在寻找一个
Id中不存在的元素。必须将id属性添加到'form'标记中。代码：<form id="feedback_form" class="feedback_form"> 'pattern'字段的'Department'属性有问题。它不能在引号中包含空格。一定是这样的。代码：pattern="[\w]{1,25}"- 在html中有错误，当打开和结束标记时，它们不匹配。你应该多注意这一点。代码：
<div> ... content ... </div> - 你必须选择你将提交的方式。通过
'addEventListener'，或者通过html的onclick="myFunction()"属性。您可以在这里看到一个例子：示例 - 当您尝试为元素
'.alert'分配样式时，您会得到一个错误，搜索返回null。这些错误阻止了代码的发展。
最后，通过遵循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>“联合来文法典”：
// 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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62271370
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号