Javascript 从HTML表单获取值失败_Javascript_Html_Forms_Firebase

Javascript 从HTML表单获取值失败

javascript html forms firebase

Javascript 从HTML表单获取值失败,javascript,html,forms,firebase,Javascript,Html,Forms,Firebase,我想使用JavaScript函数将值从html表单保存到Firebase数据库以下代码有效（不使用表单）： var ref=新的火基（“https://mydatabase.firebaseio.com/"); //奥默金·拉滕·因弗伦 var_klas=“testk”； var_datum=newdate（）.getTime（）； //生成对新位置的引用，并使用push（）添加一些数据 var postsRef=ref.child（“opmerkingen”）； var newPostRe

我想使用JavaScript函数将值从html表单保存到Firebase数据库

以下代码有效（不使用表单）：


var ref=新的火基（“https://mydatabase.firebaseio.com/");
//奥默金·拉滕·因弗伦
var_klas=“testk”；
var_datum=newdate（）.getTime（）；
//生成对新位置的引用，并使用push（）添加一些数据
var postsRef=ref.child（“opmerkingen”）；
var newPostRef=postsRef.push({
克拉斯：克拉斯，
基准面：_基准面
});

下面的代码，使用表单，不起作用

<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>


按下功能按钮（事件）
{   
var ref=新的火基（“https://mydatabase.firebaseio.com/");
//奥默金·拉滕·因弗伦
var_klas=document.getElementById（“klas”）.value；
var_datum=newdate（）.getTime（）；
//生成对新位置的引用，并使用push（）添加一些数据
var postsRef=ref.child（“opmerkingen”）；
var newPostRef=postsRef.push({
克拉斯：克拉斯，
基准面：_基准面
});
}

怎么了

添加到问题：使用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>


函数onFormSubmitted（事件）
{
event.preventDefault（）；
var ref=新的火基（“https://mydatabase.firebaseio.com/");
//奥默金·拉滕·因弗伦
var_klas=document.getElementById（“klas”）.value；
var_datum=newdate（）.getTime（）；
//生成对新位置的引用，并使用push（）添加一些数据
var postsRef=ref.child（“opmerkingen”）；
var newPostRef=postsRef.push({
克拉斯：克拉斯，
基准面：_基准面
});
//获取push（）生成的唯一ID
var postID=newPostRef.key（）；
}

您的

标签需要监听“onsubmit”事件，而不是“onClick”


函数onFormSubmitted（事件）
{
event.preventDefault（）；
//获取文本输入值
}

您的

标签需要监听“onsubmit”事件，而不是“onClick”


函数onFormSubmitted（事件）
{
event.preventDefault（）；
//获取文本输入值
}

您的

标签需要监听“onsubmit”事件，而不是“onClick”


函数onFormSubmitted（事件）
{
event.preventDefault（）；
//获取文本输入值
}

您的

标签需要监听“onsubmit”事件，而不是“onClick”


函数onFormSubmitted（事件）
{
event.preventDefault（）；
//获取文本输入值
}

这是一个很容易通过在控制台中调试解决的问题。让我们一步一步走，这样你就可以看出哪里出了问题

如果打开控制台（通常是F12，或在开发人员工具中），您将看到页面生成的消息和错误。让我们从您的代码开始（我将其复制到JSFIDLE:）

您正在将变量

（未在任何地方定义）传递给函数。JavaScript代码在那里失败，浏览器继续正常提交。如果检查控制台，您将看到如下错误：

未捕获引用错误：未定义e

好的。让我们改变一下。更新此行代码，并删除

（）：

就这样！不再出现错误，问题已修复

可以查看完整代码，或在此处查看：

JS:

HTML:

作为旁注，您正在返回函数

onFormSubmitted（）

的结果，但该函数没有返回任何值。因此，您可以将onsubmit调用更改为onsubmit=“onformsubmited（）”

这是一个可以通过在控制台中调试轻松解决的问题。让我们一步一步走，这样你就可以看出哪里出了问题

如果打开控制台（通常是F12，或在开发人员工具中），您将看到页面生成的消息和错误。让我们从您的代码开始（我将其复制到JSFIDLE:）

您正在将变量

（未在任何地方定义）传递给函数。JavaScript代码在那里失败，浏览器继续正常提交。如果检查控制台，您将看到如下错误：

未捕获引用错误：未定义e

好的。让我们改变一下。更新此行代码，并删除

（）：

就这样！不再出现错误，问题已修复

可以查看完整代码，或在此处查看：

JS:

HTML:

作为旁注，您正在返回函数

onFormSubmitted（）

的结果，但该函数没有返回任何值。因此，您可以将onsubmit调用更改为onsubmit=“onformsubmited（）”

这是一个可以通过在控制台中调试轻松解决的问题。让我们一步一步走，这样你就可以看出哪里出了问题

如果打开控制台（通常是F12，或在开发人员工具中），您将看到页面生成的消息和错误。让我们从您的代码开始（我将其复制到JSFIDLE:）

您正在将变量

（未在任何地方定义）传递给函数。JavaScript代码在那里失败，浏览器继续正常提交。如果检查控制台，您将看到如下错误：

未捕获引用错误：未定义e

好的。让我们改变一下。更新此行代码，并删除

（）：

就这样！没有更多的错误

<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>

<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>

<form method='post' action='' onsubmit="return onFormSubmitted()">

function onFormSubmitted() {

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>