将文本框中的数据提交到 Firebase 不起作用

Question

我有这个 HTML 文本框：

    <script src="../js/writeTo.js"></script>
    <form>
        <div class="post-title">
            <input type="text" placeholder="Post Title">
        </div>
        <div class="post-content">
            <textarea type="text" placeholder="Post Content"></textarea>
        </div>
        <button type="submit" class="submit">Submit</button>
    </form>

我的名为 writeTo.js 的 js 文件包含以下代码：

    var url = "https://blog-posts.firebaseio.com/";

    var firebaseRef = new Firebase(url);


    function funct1()

    {
var title = $('#post-title').val();

     var post = $('#post-content').val();

     var date = Date();

     firebaseRef.set({Title: +title, Content: +post, Date: +Date()});

    }



    submit.onclick = funct1();

当我在文本框中输入内容并单击提交时，我查看了我的 Firebase 并没有新数据（我也是使用 Firebase 的新手）。

它不起作用，任何人都可以看到问题吗？ （可能有几个，我是 JavaScript 新手）

Answer 1

您的脚本存在一些问题。我已经在this jsfiddle 中解决了它们，但也会在下面解释。

获取输入的文本内容

您的输入 HTML 如下所示：

<div class="post-title">
    <input type="text" placeholder="Post Title">
</div>

你用来读取值的 JavaScript 是：

var title = $('#post-title').val();

如果您阅读the documentation for val，您会发现它是在input 元素本身上调用的。您正在包装 div 上调用它。

最简单的改变是得到这样的值：

var title = $('#post-title').text();

将处理程序与表单关联

你用这样的形式连接你的事件处理程序：

submit.onclick = funct1();

很遗憾，这不会像您期望的那样工作。

做什么是：

1. 调用funct1
2. 将funct1的返回值赋值给onclick

你想要做的是：

submit.onclick = funct1;

所以这会将funct1 分配给onclick。

您可能想了解更现代的分配事件处理程序的方法。

将值传递给 Firebase

您将值传递给 Firebase 的代码似乎有点不对劲。改用这个

 firebaseRef.set({Title: title, Content: post, Date: date});

取消表单提交的常规浏览器处理

浏览器通常通过将表单的值发布到 URL 来处理对表单提交按钮的点击。

但在您的应用程序中，您自己处理这个问题，所以您应该告诉浏览器忽略提交。

您可以通过从函数中返回 false 来做到这一点：

 return false;

请注意，这将在 Chrome 中发出以下警告：

event.returnValue 已弃用。请改用标准 event.preventDefault()。

所以你确实应该考虑使用event.preventDefault() 而不是返回false。请参阅下面的总代码以了解如何执行此操作。

完整代码

var url = "https://blog-posts.firebaseio.com/";

var firebaseRef = new Firebase(url);

function funct1(evt)
{
  var title = $('#post-title').text();

  var post = $('#post-content').text();

  var date = Date();

  firebaseRef.set({Title: title, Content: post, Date: date});
  evt.preventDefault();
}

var submit = document.getElementsByTagName('button')[0];

submit.onclick = funct1;

添加新帖子，而不是覆盖现有帖子

您的代码现在将替换您 Firebase 中的博客文章。我想您可能更喜欢在按下提交按钮时添加新帖子。

为此，您需要调用 Firebase 的 push 函数。 Firebase 在managing lists 上有一些很棒的文档。

它的要点是这样的：

var postRef = firebaseRef.push(); // create a new post
postRef.set({Title: title, Content: post, Date: date});

因此，您创建一个新帖子，然后在该帖子上设置您的值，而不是在顶级 Firebase 参考上。