firebase 错误：表单提交添加项目到列表

h9a6wy2h 于 2023-11-21 发布在其他

关注(0)|答案(1)|浏览(176)

我对HTML和JavaScript非常陌生，所以我确信这是我犯了一些很基本的错误。然而，我有一个非常基本的单页网站设置，从Firebase RTDB获取数据以显示某些信息，并能够从表单提交中将数据发布到数据库。当网页加载时，我用从数据库接收的一些JSON数据填充一个列表，

然而，当我从列表中选择一个项目，然后将数据发布到数据库时，列表中的所有项目都会再次添加。

这似乎只会发生在有时候，而不是每次，我很难让bug始终激活，有时它会在每次发送数据时添加项目，而其他时候只添加几次。
以下是我的一些HTML：

</head>
<body  onload="populateDropdown()">
    
    <h1 style="background-color:DodgerBlue;
                text-align: center;
                font-size: 60px;
                text-shadow: 0cqmax;
                color: coral;"
    >SunSync</h1>
    <form action="#">       
        <label for="sel">Choose a Dispenser</label>
        <select id="sel">
            <option value="">Dispensers </option>
        </select>
        <input type="submit" value="Choose" onclick="displayData(document.getElementById('sel'))" />
    </form>   
   <div id="deviceInfo" style="display: none;">
    <P>Dispenser: <span id="reading-dispenserName"></span></P>
    <P>Dispenser Location: <span id="reading-cityName"></span></P>
    <p>Uv Index: <span id="reading-uvindex"></span></p>
    <p>Weather: <span id="reading-weather"></span></p>
    <p>Danger: <span id="reading-category"></span></p>
    <p>Time Above 3: <span id="reading-timeabove"></span></p>
    
    <form id="messageToSend" action="#">
        <label for="message">Message:</label><br>
        <input type="text" id='message' name="message"><br>
        <input type="button" value="Submit" onclick="sendMessage(document.getElementById('message').value)">
    </form>
    </div>
</body>

字符串
下面是我的一些JavaScript函数：

function populateDropdown(){
  //This gets the dispenser list 
  //document.getElementById("sel").options.length=0;
  let i = 0;
  databaseCityList.on('value', (snapshot) => {
    cityList = snapshot.val();
    console.log(cityList);
    var items = [];
    items = cityList;
    
    const obj = JSON.stringify(cityList);
    const list = JSON.parse(obj);
    console.log(list);

    var cityListOfLists = [];

  //This sorts the data into an array for sorting
  var sel = document.getElementById('sel')
  for(items in list){
      
      console.log(items);
      cityListOfLists.push(items);
            i++;
            console.log(i);
    }

    console.log(cityListOfLists);

    //This cycles through the list and appends the various dispenser names into the dropdown list
    let p = 0;
    for (items in cityListOfLists){
        var opt = document.createElement('option');
        opt.innerHTML = cityListOfLists[p];
        opt.value = cityListOfLists[p];
        sel.appendChild(opt);
        console.log(cityListOfLists[p]);
        p++;

    }
    //Reset variables otherwise dropwdown grows after message send? --didnt work - worked once?
    i = 0;
    p = 0;
  //Error handling
    document.getElementById("reading-citylist").innerHTML = list.Victoria;
  }, (errorObject) => {
    console.log('The read failed: ' + errorObject.name);
  }); 

}

function sendMessage(){
  //This sends a message to the desired path -- Sending a message doubles the dropdown?
    var device1 = document.getElementById("sel").value;
    
    var messagePath = "/Dispensers/"
    messagePath += device1;
    messagePath += "/message/";

  database.ref(messagePath).set(document.getElementById('message').value, function(error) {
  if (error) {
      // The write failed...
      console.log("Failed with error: " + error)
  } else {
      // The write was successful...
      console.log("success")
      console.log(document.getElementById('message').value)
  }
})}

型
到目前为止，我已经调整了我能想到的一切，比如在populateDropdown函数的顶部添加一些代码来完全删除我的所有项目，但这个错误仍然存在。就像我说的，我对这个非常陌生，所以任何帮助都会非常感激。

firebase

来源：https://stackoverflow.com/questions/77348907/bug-form-submission-adding-items-to-dropdown-list