使用 Firebase 单击按钮时重置/清除表单

Question

我在使用 Firebase 单击按钮时实际上无法清除表单的内容。我可以在另一个只有一个文本字段的表单上使用type="reset"，但是，第二个表单有两个文本字段，当我尝试以下操作时：

function clearFields() {
    document.getElementById(userCityEmail).value = "";
    document.getElementById(cityTextField).value = "";
}

或者我试试这个（只是使用 reset()）：

function clearFields() {
    document.getElementById(userCityEmail).reset();
    document.getElementById(cityTextField).reset();
}

页面将重新加载，但没有任何内容发送到 Firebase。如果我不使用上述功能并将文本留在文本字段中，它会将内容发送到 Firebase。我哪里错了？提前致谢！

这是我的 HTML 表单：

<form id="myform" method="post">
    <input type="email" class="contactUsEmail" id="userCityEmail" placeholder="Enter email" name="contactUsEmail">
    <input type="text" class="contactUsEmail" id="cityTextField" placeholder="City" name="contactUsCity">
    <button type="submit" id="citySubmitButton" onclick="submitCityClick(); clearFields(); return false;" class="btn btn-primary contactUsButton">Submit</button>
</form>

Javascript：

var userCityEmail = document.getElementById('userCityEmail');
var cityTextField = document.getElementById('cityTextField');
var citySubmitButton = document.getElementById('citySubmitButton');

function submitCityClick() {
  var firebaseRef = firebase.database().ref();
  var userEmail = userCityEmail.value + " " + cityTextField.value;

  firebaseRef.child("potentialCities").push().set(userEmail);
}

function clearFields() {
    document.getElementById(userCityEmail).value = "";
    document.getElementById(cityTextField).value = "";
}

Answer 1

弄清楚现在发生了什么。 你遇到的问题是你在打电话 firebaseRef.child("potentialCities").push().set(userEmail);

这没有意义。仅使用 push(userEmail) 或 set(userEmail)。

这两件事的区别在于push会在potentialCities树节点下创建一个随机ID，而set会将用户邮件数据放在同一个对象下。它可能会被覆盖。这种情况下推荐推送。

为了解释字段清除，在提交点击方法中仍然有clearfields方法。下面的代码

function submitCityClick() {
   var firebaseRef = firebase.database().ref();
   var userEmail = userCityEmail.value + " " + cityTextField.value;

   firebaseRef.child("potentialCities").push(userEmail);
   clearFields()
 }

这也希望你有正确的 firebase ref，你检查过你正在使用的 url 吗？

你做错的另一件事是你声明了这些变量：

var userCityEmail = document.getElementById('userCityEmail');
var cityTextField = document.getElementById('cityTextField');

然后尝试在 clearFields 中使用该变量获取 elementById：

document.getElementById(userCityEmail).value = "";
document.getElementById(cityTextField).value = "";

这不起作用，您必须通过 clearFields 中的字符串获取它，或者只使用您声明的变量：

userCityEmail.value = "";
or
document.getElementById('userCityEmail').value = "";

我不建议仅仅因为这个原因而引入 jQuery。这是一个很大的库，如果你能用 vanilla javascript 就足够了，那就去做吧！