完整代码

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();

将处理程序与表单

将值传递给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参考号上。

从文本框提交数据到Firebase无法正常工作

1 个答案:

获取输入的文本内容

将处理程序与表单

将值传递给Firebase

取消表单提交

完整代码

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