从 HTML 表单中获取值失败

Question

我想使用 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>

Answer 1

您的 <form> 标签需要监听 "onsubmit" 事件，而不是 "onClick"。

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

Answer 2

这是一个很容易通过控制台调试解决的问题。让我们一步一步来，这样您就可以看到问题所在。

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

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

Uncaught ReferenceError: e is not defined

很好。让我们做出改变。更新这行代码，并删除 e (see full code here):

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

再试一次运行。现在您收到一个新错误，因为 event 未定义：

Uncaught TypeError: Cannot read property 'preventDefault' of undefined

发生这种情况是因为 event 始终存在，并且您不需要在函数头中定义它（您使用的是未定义的 event 变量而不是全局变量 event 对象）。所以只需删除函数中的引用（但继续使用 event.preventDefault()、see the full code here）：

function onFormSubmitted() {

就是这样！没有更多错误，问题已解决。

完整代码可以看in the last JSFiddle，或者这里：

JS:

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

HTML:

<form method='post' action='' onsubmit="return onFormSubmitted()">
    <input type='text' name='Klas' id='Klas'>
    <input type='submit' name='submit' value='Send'>
</form>

附带说明一下，您正在返回函数 onFormSubmitted() 的结果，但该函数未返回任何值。因此，您可以将 onsubmit 调用更改为 onsubmit="onFormSubmitted()" as seen on this JSFiddle.

从 HTML 表单中获取值失败

Taking values from HTML form fails

html

javascript

forms

firebase