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>

这是我的 JavaScript 脚本

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

我相信您的问题是由 method="post" 引起的当您单击“提交”按钮时，浏览器会将表单提交到 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);
}