用于读取值的JavaScript是:
var title = $('#post-title').val();
如果您阅读the documentation for val
,您将看到它应该在输入元素本身上调用.你在包装div上调用它.
最简单的变化是获得如下值:
var title = $('#post-title').text();
将处理程序与表单相关联
您使用以下形式连接事件处理程序:
submit.onclick = funct1();
不幸的是,这不会像你期望的那样有效.
这是做什么的:
>调用funct1
>将funct1的返回值分配给onclick
你想要做的是:
submit.onclick = funct1;
所以这会将funct1分配给onclick.
您可能想要阅读更现代的方法来分配事件处理程序btw.
将值传递给Firebase
您将值传递给Firebase的代码似乎有点过时了.请改用它
firebaseRef.set({Title: title,Content: post,Date: date});
取消表单提交的常规浏览器处理
浏览器通常通过将表单的值发布到URL来处理表单提交按钮的点击.
但是在您的应用程序中,您自己处理此问题,因此您应该告诉浏览器忽略提交.
您可以通过从函数返回false来执行此操作:
return false;
请注意,这会在Chrome中显示以下警告:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
所以你应该考虑使用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,Date: date});
evt.preventDefault();
}
var submit = document.getElementsByTagName('button')[0];
submit.onclick = funct1;
添加新帖子,而不是覆盖现有帖子
您的代码现在将替换Firebase中的博客帖子.我想你在按下提交按钮时可能更喜欢添加一个新帖子.
要实现此目的,您需要调用Firebase的推送功能. Firebase在managing lists上有一些很棒的文档.
它的要点是:
var postRef = firebaseRef.push(); // create a new post
postRef.set({Title: title,Date: date});
因此,您创建一个新帖子,然后在其上设置您的值,而不是在顶级Firebase参考号上.