JavaScript不会在Firebase实时数据库中写入数据

kgsdhlau  于 2023-03-13  发布在  Java
关注(0)|答案(2)|浏览(135)

我一直在尝试通过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});   

}
wydwbb8l

wydwbb8l1#

我认为您的问题是由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);
}
nukf8bse

nukf8bse2#

必须将此信息写入具有和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

相关问题