Can't save data to firebase database

Question

I have tried everything, but it just can't seem to save data to the database. Here is my sample code html:

<div class="form-body">
         <div class="form-row">
          <div class="form-controls">
           <input type="text" name="emails" class="field"  id="email" placeholder="Email Address">
          </div><!-- /.form-controls -->
         </div><!-- /.form-row -->
         <div class="form-row">
          <div class="form-controls">
           <input type="text" name="names" class="field" id="name" placeholder="Names (First, Middle, Last)">
          </div><!-- /.form-controls -->
         </div><!-- /.form-row -->


         <div class="form-row">
          <div class="form-controls">
           <input type="number" name="phonenumber" id="number" class="field"  placeholder="Phonenumber">
          </div><!-- /.form-controls -->
         </div><!-- /.form-row -->

          <div class="form-row">
          <div class="form-controls">
           <input type="text" name="countries" id="country" class="field"  placeholder="Country">
          </div><!-- /.form-controls -->
         </div><!-- /.form-row -->

          <div class="form-row">
          <div class="form-controls">
           <input type="text" name="usernames" id="username" class="field"  placeholder="Username">
          </div><!-- /.form-controls -->
         </div><!-- /.form-row --><div align="center">
    <button  onclick="saveData()" id="submit" >Register</button>
  <br />
  <span id="loading_image" style="display: none;">
        <img src="../images/ajax-loader.gif" alt="Please Wait" width="20" height="11"/>    </span>
  </div>

And this is how i initialized firebase in the body of my html code:

    <script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script>
  var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  };
  firebase.initializeApp(config);
</script>
        <script src="js/register.js"></script>

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script src="js/modernizr-custom.js"></script>
     <!-- jQuery 2.1.4 -->
     <script src="js/jQuery-2.1.4.min.js"></script>
     <!-- Bootstrap 3.3.6 JS -->
     <script src="js/bootstrap.min.js" type="text/javascript"></script>
     <!-- Waypoints JS -->
     <script src="js/waypoints.min.js" type="text/javascript"></script>
     <!-- Kafe JS -->
     <script src="js/kafe.js" type="text/javascript"></script>

And i put Javascript code for saving data to firebase in the javascript file called register.js. Here is the code:

    var user_email = document.getElementById('email');
var  user_name = document.getElementById('name');
var user_phonenumber = document.getElementById('number');
var  user_country = document.getElementById('country');
var  user_username = document.getElementById('username');
var user_submit = document.getElementById('submit');

$('#submit').click(function() {
var cemail = user_email.value;
var cname = user_name.value;
var cnumber = user_phonenumber.value;
var cusername = user_username.value;
var ccountry = user_country.value;

console.log('email is', cemail);
console.log('name is', cname);


  var myRef = firebase.database().ref('register');
 key=myRef.push().key;

  var newData={
    id:key,
email:cemail,
name:cname,
country:ccountry,
username:cusername,
phone_number:cnumber

  }

   myRef.push(newData);

});

Please help me solve this, I have tried reading all the documentation from firebase but I can't seem to make it save data to the database.

Answer 1

Remove key = ... line and use myRef.push(newData).then(function (snapshot) {}) .

The push method returns a promise.

Also ensure that your database rules allows you to read from that path.