无法使用 html 表单推送到 Firebase

Question

致所有了解 Firebase、HTML 和 Javascript 的人。

尝试使用 HTML 中的输入表单发布到 Firebase 数据库，但无法正常工作。

已设置数据库和所有内容，但未显示。没有返回错误。

你能帮帮我吗？

这是 HTML

<form id="recommendationForm">
    <div class="row marketing">
        <div class="input-group">
            <span class="input-group-addon" id="sel0">Name</span>
            <input type="text" class="form-control" placeholder="Ex.: 1832" aria-describedby="basic-addon1" id="os-input">
        </div>
        <div class="form-group">
            <label for="sel1">Type:</label>
            <select class="form-control" id="sel1">
            <option selected value="1">Fixed</option>
            <option value="2">Mobile</option>
            </select>
        </div>

        <div class="form-group">
            <label for="sel2">Technician:</label>
            <select class="form-control" id="sel2">
                <option selected value="1">Brandon</option>
                <option value="2">Justin</option>
                <option value="3">Ryan</option>
                <option value="4">Tyler</option>
            </select>
        </div>

        <br>

    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

然后是 .js 文件

/*
  initializing firebase and getting values from input
  then push the values and submit 'em
*/

$(function() {
    var config = {
        apiKey: "MY KEY",
        authDomain: "MY AUTH",
        databaseURL: "MY URL",
        projectId: "MY ID",
        storageBucket: "MY BUCKET",
        messagingSenderId: "MY ID"
    };
    firebase.initializeApp(config);

    var recommendations = firebase.database().ref("recommendations");
    var submitRecommendation = function() {

        // Get input values from each of the form elements
        var value1 = $("#sel0").val();
        var value2 = $("#sel1 option:selected").text();
        var value3 = $("#sel2 option:selected").text();

        // Push a new recommendation to the database using those values
        recommendations.push({
            "os": value1,
            "datepicker": value2,
            "estado": value3
        });

        $(window).load(function() {
            // Find the HTML element with the id recommendationForm, and when the submit
            // event is triggered on that element, call submitRecommendation.
            $("#recommendationForm").submit(submitRecommendation);

        });
    };
});

这里是 JSFiddle https://jsfiddle.net/pimatco/dxhspx3o/

Answer 1

您的表单没有发布到 firebase，它正在执行获取请求。

<form id="recommendationForm" method="post">

应该做的伎俩

Answer 2

你不能直接在 ref 上push()，你必须push() 然后set()：

文档中的参考 https://firebase.google.com/docs/database/admin/save-data#section-push

以下是编辑后的代码示例：

    recommendations.push().set({
        "os": value1,
        "datepicker": value2,
        "estado": value3
    });

您还应该从您的数据库引用中访问child() 以便能够推送到它。

var recommendations = firebase.database().ref().child("recommendations");

最后，您在 submitRecommendation 函数的声明中定义了 submit 函数

你有：

var submitRecommendation = function() {
  ...

    $(window).load(function() {
        $("#recommendationForm").submit(submitRecommendation);
    });
};

但应该是：

var submitRecommendation = function() {
  ...

};

$(window).load(function() {
     $("#recommendationForm").submit(submitRecommendation);
});

执行所有这些操作将使您能够推送到 Firebase。