2017-10-10 1 views
0

Pour tous ceux qui connaissent Firebase, HTML et Javascript.Impossible de pousser vers Firebase en utilisant le formulaire html

Essayez de publier dans la base de données Firebase à l'aide du formulaire de saisie au format HTML, mais cela n'a tout simplement pas fonctionné.

Déjà définir la base de données et tout, mais il ne s'affiche pas. Aucune erreur n'est renvoyée.

Pouvez-vous m'aider?

C'est le 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> 

Puis ici le fichier .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); 

    }); 
}; 


}); 

Voici le jsFiddle https://jsfiddle.net/pimatco/dxhspx3o/

Répondre

0

Vous ne pouvez pas push() directement sur l'arbitre, vous avoir à push() puis set():

Référence dans la documentation https://firebase.google.com/docs/database/admin/save-data#section-push

Voici un exemple du code édité:

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

Aussi, vous devriez accèderont à la child() de votre ref base de données pour pouvoir pousser sur elle.

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

Et enfin, vous définissez votre fonction submit dans la déclaration de votre fonction submitRecommendation

Vous avez:

var submitRecommendation = function() { 
    ... 

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

Mais il devrait être:

var submitRecommendation = function() { 
    ... 

}; 

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

Faire tout de cela vous permettra de pousser à la base de feu.

+0

Merci pour cela, mais ne fonctionne toujours pas. il a renvoyé cette erreur ** [Deprecation] XMLHttpRequest synchrone sur le thread principal est obsolète en raison de ses effets préjudiciables à l'expérience de l'utilisateur final. Pour plus d'aide, consultez https://xhr.spec.whatwg.org/.** – spaceman

+0

@MathLoures J'ai ajouté un peu plus à la réponse. –

+0

l'erreur est partie mais rien ne s'est passé. – spaceman

0

Votre formulaire ne poste pas sur Firebase, il fait une demande d'obtention.

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

devrait faire l'affaire