2017-10-10 10 views
0

Firebase、HTML、およびJavascriptについて知っているすべての人に。html形式を使用してFirebaseにプッシュできません。

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

    }); 
}; 


}); 

を提出しますが、REFに直接JSFiddle https://jsfiddle.net/pimatco/dxhspx3o/

答えて

0

あなたがすることができませんpush()ですpush()があり、set()

ここドキュメント https://firebase.google.com/docs/database/admin/save-data#section-push

での参照は、編集されたコードの例です:

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

はまた、あなたがそれに上のプッシュできるようにするには、データベースのREFから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); 
}); 

すべてを行いますこれにより、あなたは火災基地に押し込むことができます。

+0

感謝を行う必要がありますが、まだ動作しませんでした。このエラーが返されました** [廃止予定]メインスレッドの同期XMLHttpRequestは、エンドユーザーの経験に有害な影響を与えるため、非推奨です。詳細については、https://xhr.spec.whatwg.org/.**を参照してください。 – spaceman

+0

@MathLoures私は答えにもう少し追加しました。 –

+0

エラーはなくなりましたが、何も起こりません。 – spaceman

0

あなたのフォームはfirebaseに投稿されていません。リクエストをしています。

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

はトリックにそのための

関連する問題