已解决（通过使用新数据库创建新的Firebase项目来解决）-javascript不会在Firebase实时数据库中写入数据

Question

我一直在尝试通过html输入表单使用javascript在firebase上存储数据这是我的HTML表单

我已经尝试了所有可能的解决方案，但是即使以前相同的代码在相同的数据库上都可以工作，但它根本不会写

所以我的问题是我的代码有什么问题，为什么它突然停止工作

<form action="" method="post" id="myform"><br>
<input id="tournumber" type="text" placeholder="tour number" /><br> <br>   
<input id="tname" type="text" placeholder="name" />    <br><br>

<input id="arname" type="text" placeholder="email" />    <br><br>
<input id="enname" type="text" placeholder="date" />    <br><br>
<input id="duration" type="text" placeholder="national Id" /><br><br>    
<input id="guide" type="text" placeholder="national Id" />    <br><br>
<input id="date" type="text" placeholder="national Id" />    <br><br>
<br><br>
<a href="#" onclick="sub()"> <button id = 'submit' type="submit">Submit</button></a>
</form>

这是我的js脚本

function sub()
{


var tournumber= document.getElementById('tournumber').value;
var tname= document.getElementById('tname').value;
var arname= document.getElementById('arname').value;
var ename= document.getElementById('enname').value;
var duration= document.getElementById('duration').value;
var guide= document.getElementById('guide').value;
var tdate= document.getElementById('date').value;
       var artype = "test";
        var entype = "Guided by a guide";

savedata(tournumber, tname, arname, ename, duration, guide, tdate, artype, entype);

}

function savedata(tournumber, tname, arname, ename, duration, guide, tdate, artype, entype)
{
  var tourRef = firebase.database().ref('tours/Available_tours')
    .child(parseInt(tournumber))
    .set({dayAR:arname, dayEN:ename, duration:duration, 
          guide:guide, tourDate:tdate, tourName:tname, typeAR:artype, typeEN:entype});   

} 

Answer 1

您必须使用和ID将这些信息写入特定的文档。例如：

function savedata(SOME_ID,tournumber, tname, arname, ename, duration, guide, tdate, artype, entype)
{
  var tourRef = firebase.database().ref('tours/Available_tours/'+SOME_ID)
    .child(parseInt(tournumber))
    .set({dayAR:arname, dayEN:ename, duration:duration, 
          guide:guide, tourDate:tdate, tourName:tname, typeAR:artype, typeEN:entype});   

} 

您可以在这里找到更多有关此的信息：https://firebase.google.com/docs/database/web/read-and-write

Answer 2

我相信您的问题是由method="post"引起的，因为当您单击Submit按钮时，浏览器会将表单提交到action=""指定的新路径（解析为同一页面）。

删除method="post"并将onclick从<a>更改为表单的onsubmit处理程序将产生以下代码：

<form action="#" onsubmit="return sub(this)" id="myform"><br>
<input id="tournumber" type="text" placeholder="tour number" />    <br><br>
<input id="tname" type="text" placeholder="name" />    <br><br>
<input id="arname" type="text" placeholder="email" />    <br><br>
<input id="enname" type="text" placeholder="date" />    <br><br>
<input id="duration" type="text" placeholder="national Id" />    <br><br>
<input id="guide" type="text" placeholder="national Id" />    <br><br>
<input id="date" type="text" placeholder="national Id" />    <br><br>
<br><br>
<button id="submit" type="submit">Submit</button>
</form>

通过使用return sub(this)传递表单，您可以消除许多document.getElementById(id)调用并将其替换为form[id]。
function sub(form) {
    var tournumber = form['tournumber'].value;
    var tname = form['tname'].value;
    var arname = form['arname'].value;
    var ename = form['enname'].value;
    var duration = form['duration'].value;
    var guide = form['guide'].value;
    var tdate = form['date'].value;
    var artype = "test";
    var entype = "Guided by a guide";

    savedata(tournumber, tname, arname, ename, duration, guide, tdate, artype, entype);

    return false; // tell form to stay on this page
}

其他建议的更改
在savedata()函数中，您应该返回set()返回的Promise，以便您可以处理任何错误。
function savedata(tournumber, tname, arname, ename, duration, guide, tdate, artype, entype)
{
  return firebase.database().ref('tours/Available_tours')
    .child(parseInt(tournumber))
    .set({dayAR:arname, dayEN:ename, duration:duration, 
          guide:guide, tourDate:tdate, tourName:tname, typeAR:artype, typeEN:entype});
}

// e.g. savedata(...).then(() => console.log('saved successfully'), (err) => console.error('save failed: ', err))

我避免调用带有太多参数的函数，因为将来增加或删除数据条目可能会很痛苦，而是选择传递一个对象。
function sub(form) {
    var tournumber = form['tournumber'].value;

    var newData = {
      dayAR: form['arname'].value,
      dayEN: form['enname'].value,
      duration: form['duration'].value,
      guide: form['guide'].value,
      tourDate: form['date'].value,
      tourName: form['tname'].value,
      typeAR: "test",
      typeEN: "Guided by a guide"
    };

    savedata(tournumber, newData);

    return false; // tell form to stay on this page
}

function savedata(tournumber, data)
{
    return firebase.database().ref('tours/Available_tours')
      .child(parseInt(tournumber))
      .set(data);
}