Unable to push the input data into my Firebase database

Question

I am currently working on the Sign Up module for our project and it's the first time I program using firebase as a backend. here's the code for my Sign Up form in HTML:

<form class="innerContent">
    <div class="inputTxt mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="tName">
        <label class="inputLabel mdl-textfield__label" for="tName">Name of Tailor/Tailor Shop</label>
    </div>
    <div class="inputTxt mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="tAddress">
        <label class="inputLabel mdl-textfield__label" for="tAddress">Address of Tailor/Tailor Shop</label>
    </div>
    <div class="inputTxt mdl-textfield mdl-js-textfield">
        <textarea class="mdl-textfield__input" type="text" rows= "3" id="tDesc"></textarea>
        <label class="inputLabel mdl-textfield__label" for="tDesc">Description</label>
    </div>
    <div class="inputTxt mdl-textfield mdl-js-textfield">
        <textarea class="mdl-textfield__input" type="text" rows= "3" id="tContact"></textarea>
        <label class="inputLabel mdl-textfield__label" for="tContact">Contact Details</label>
    </div>
    <div class="inputTxt mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="tUsername">
        <label class="inputLabel mdl-textfield__label" for="tUsername">Username</label>
    </div>
    <div class="inputTxt mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="password" id="tPassword">
        <label class="inputLabel mdl-textfield__label" for="tPassword">Password</label>
    </div>
    <div class="inputTxt mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="password" id="tRePassword">
        <label class="inputLabel mdl-textfield__label" for="tRePassword">Re-type Password</label>
    </div>
    <p>
    <input id="TaC" type="checkbox" for="TaC"> I have read the the <a href="#">Terms and Conditions</a>
    <button id="SignUpBtn" class="farBtn mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" type="button" onclick="signUp()" disabled>
        <i class="material-icons">done_all</i> Sign Up
    </button>
    </p>
</form>

I want a user to register all of its information into my firebase database. When the Sign Up button is pressed, it will trigger this function in my javascript:

function signUp(){
var name = $("#tName").val();
var address = $("#tAddress").val();
var description = $("#tDesc").val();
var contact = $("#tContact").val();
var username = $("#tUsername").val();
var pword = $("#tPassword").val();

var tailors = notsDB.child("tailors");

tailors.push({
    tName: name,
    tAddreass: address,
    tDescription: description,
    tContact: contact,
    tUsername: username,
    tPassword: pword
});

But unfortunately, it doesn't work! I looked at my database in the firebase console and nothing's change. I tried changing the rules by replacing the auth != null to true , but it didn't work.

Setting aside the possibility of not implementing the push function properly, I'm suspecting that I'M NOT CONNECTED PROPERLY TO MY FIREBASE ACCOUNT. I recalled all the procedures I did in connecting my web app to firebase:

I created an account in firebase
I installed Node.js in my pc
I put the following snippet of code in my HTML file (at the bottom of the body section, before all other javascript)

<!-- FIREBASE -->
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-messaging.js"></script>

<script>
<!-- Initialize Firebase -->
var config = {
    apiKey: "AIzaSyCM6Ublqz7PLkRgkzGe6vhsvb7iU0BU5Tk",
    authDomain: "nots-eece8.firebaseapp.com",
    databaseURL: "https://nots-eece8.firebaseio.com",
    projectId: "nots-eece8",
    storageBucket: "nots-eece8.appspot.com",
 messagingSenderId: "472888671312"
};
firebase.initializeApp(config);
</script>

Is there any procedure that I skipped in setting up the firebase in my web app? Is it necessary to install the Firebase SDK with the npm install firebase --save? Or the error lies in my push function?

NOTE: I've put the following code before my signUp method in my javascript file:

var firebase = require('firebase');

var notsDB = new Firebase('https://nots-eece8.firebaseio.com');

@editor who tried to remove the API key: this is just configuration data. See https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public — Frank van Puffelen, Aug 06 '17 at 16:30

score 0 · Accepted Answer · answered Aug 06 '17 at 16:04

ref.push() only return another reference, it doesn't update, you have to grab the new reference key and then update in the parent level, here's example from firebase.

function writeNewPost(uid, username, picture, title, body) {
  // A post entry.
  var postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  var newPostKey = firebase.database().ref().child('posts').push().key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  var updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return firebase.database().ref().update(updates);
}

read and write data to firebase

woah, It worked. Did I misunderstood the tutorials that I saw on the internet? I always thought that the push() method can write data into my database — Karl Adrian, Aug 07 '17 at 14:41

score 0 · Answer 2 · answered Aug 06 '17 at 19:27

You can initialize your firebase app using firebase.initializeApp(config), this will return a reference of your app which you can use later to connect with to firebase database.

var fb = firebase.initializeApp(config);

Make use of the firebase reference stored on fb to connect to firebase db , You can use

fb.database()

If you want to store your signup data the you can use firebase push() method.

fb.database().ref('tailors').push({
        tName: name,
        tAddreass: address,
        tDescription: description,
        tContact: contact,
        tUsername: username,
        tPassword: pword });

This will create a child named tailors in your firebase database and store your signup data corresponding to an push Id.

Did you get any error? I guess you got firebase error _default app already exist._ — Satish Kumar, Aug 07 '17 at 15:31

Unable to push the input data into my Firebase database

2 Answers2