我想使用JavaScript函数将值从html表单保存到Firebase数据库。
以下代码有效(不使用表单):
<html>
<head>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
</head>
<body>
<script>
var ref = new Firebase("https://mydatabase.firebaseio.com/");
// Opmerking laten invullen
var _klas = "testk";
var _datum = new Date().getTime();
// Generate a reference to a new location and add some data using push()
var postsRef = ref.child("opmerkingen");
var newPostRef = postsRef.push({
klas: _klas,
datum: _datum
});
</script>
</body>
</html>
以下代码,使用表单,不起作用
<html>
<head>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script language=javascript type="text/javascript">
function buttonPressed(event)
{
var ref = new Firebase("https://mydatabase.firebaseio.com/");
// Opmerking laten invullen
var _klas = document.getElementById("Klas").value;
var _datum = new Date().getTime();
// Generate a reference to a new location and add some data using push()
var postsRef = ref.child("opmerkingen");
var newPostRef = postsRef.push({
klas: _klas,
datum: _datum
});
}
</script>
</head>
<body>
<form method='post' action=''>
<input type='text' name = 'Klas' id='Klas'>
<input type='submit' name='submit' onClick='buttonPressed(event)'>
</form>
</body>
</html>
有什么问题?
添加到问题:使用onFormSubmitted
更改了代码<html>
<head>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script language=javascript type="text/javascript">
function onFormSubmitted(event)
{
event.preventDefault();
var ref = new Firebase("https://mydatabase.firebaseio.com/");
// Opmerking laten invullen
var _klas = document.getElementById("Klas").value;
var _datum = new Date().getTime();
// Generate a reference to a new location and add some data using push()
var postsRef = ref.child("opmerkingen");
var newPostRef = postsRef.push({
klas: _klas,
datum: _datum
});
// Get the unique ID generated by push()
var postID = newPostRef.key();
}
</script>
</head>
<body>
<form method='post' action='' onsubmit="return onFormSubmitted(e)">
<input type='text' name='Klas' id='Klas'>
<input type='submit' name='submit' value='Send'>
</form>
</body>
</html>
答案 0 :(得分:1)
而不是“onClick”,您的<form>
代码需要收听“onsubmit”事件。
<form method='post' action='' onsubmit="return onFormSubmitted(e)">
<input type='text' name = 'Klas' id='Klas'>
<input type='submit' name='submit'>
</form>
<script>
function onFormSubmitted(event)
{
event.preventDefault();
// get text input value
}
</script>
答案 1 :(得分:1)
这是一个可以通过在控制台中调试轻松解决的问题。让我们一步一步走,这样你就可以看出出了什么问题。
如果您打开控制台(通常是F12或开发人员工具),您将看到该页面生成的消息和错误。让我们从您的代码开始(我将其复制到JSFiddle中:http://jsfiddle.net/hu6g0w6r/)。
您正在将变量e
(未在任何地方定义)传递给该函数。 JavaScript代码失败,浏览器继续正常提交。如果您检查控制台,则会看到如下错误:
未捕获的ReferenceError:未定义e
精细。让我们做出改变。更新此行代码,然后移除e
(see full code here):
<form method='post' action='' onsubmit="return onFormSubmitted()">
再试一次。现在您收到一个新错误,因为event
未定义:
未捕获的TypeError:无法读取属性&#39; preventDefault&#39;未定义的
这是因为event
始终存在,并且您不需要在函数标头中定义它(您使用的是未定义的event
变量而不是全局{{1}对象)。所以只需删除函数中的引用(但继续使用event
,see the full code here):
event.preventDefault()
那就是它!没有更多错误,问题已修复。
可以看到完整的代码in the last JSFiddle,或者在这里:
JS:
function onFormSubmitted() {
HTML:
function onFormSubmitted() {
event.preventDefault();
var ref = new Firebase("https://mydatabase.firebaseio.com/");
// Opmerking laten invullen
var _klas = document.getElementById("Klas").value;
var _datum = new Date().getTime();
// Generate a reference to a new location and add some data using push()
var postsRef = ref.child("opmerkingen");
var newPostRef = postsRef.push({
klas: _klas,
datum: _datum
});
// Get the unique ID generated by push()
var postID = newPostRef.key();
}
作为旁注,您将返回函数<form method='post' action='' onsubmit="return onFormSubmitted()">
<input type='text' name='Klas' id='Klas'>
<input type='submit' name='submit' value='Send'>
</form>
的结果,但该函数未返回任何值。因此,您可以将onsubmit调用更改为onFormSubmitted()
as seen on this JSFiddle。