CODEWITHSUNDEEP
javascripthtmlfirebasefirebase-realtime-database
mur7ay
mur7ay

Reputation: 833

User input not writing to Firebase

I've tried different solutions all day and I can't get my form to write it's user input content to Firebase. The rules are currently open to everyone so I know that's not the problem. It's a three step signup process on three separate pages, however, the first step (or user input on page one) won't write to the database while the others work fine and I have setup the same way.

At this point, I'm completely lost since I've tried everything.

Here's my JS: 

var mvrName = document.getElementById("name");
var mvrAddress = document.getElementById("address");
var mvrZip = document.getElementById("zip");
var mvrPhone = document.getElementById("phone");
var mvrEmail = document.getElementById("email");
var _mvrName, _mvrAddress, _mvrZip, _mvrPhone, _mvrEmail;
var date = Date();

window.onload = function() {
  document.getElementById('nextBtn').onclick = function() {
    _mvrName = mvrName.value;
    _mvrAddress = mvrAddress.value;
    _mvrZip = mvrZip.value;
    _mvrEmail = mvrPhone.value;
    _mvrPhone = mvrEmail.value;

    var firebaseRef = firebase.database().ref();
    firebaseRef.child("Contact Info").push({
        Name: _mvrName,
        Address: _mvrAddress,
        Zip: _mvrZip,
        Email: _mvrEmail,
        Phone: _mvrPhone,
        Date_Created: date
    });
    secondStep();
  };
};

function secondStep() {
  window.location.href = 'companyInfo.html';
}

If I remove the 'secondStep()' method call then data is written to Firebase, but If I don't then it goes to the next page on button click but data isn't written to Firebase.

Here's my HTML: 

<head>

  <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
  <script>
      // Initialize Firebase
      var config = {
          ...
      };
      firebase.initializeApp(config);
  </script>

  <!-- Loading Goodle Places Library -->
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=...&libraries=places"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

  <nav>...</nav>

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <h4>Contact Details</h4>
        <input class="inputs" id="name" name="name" placeholder="Name" />
        <input class="inputs" id="address" name="address" placeholder="Street Address" />
        <input class="inputs" id="zip" name="zip" placeholder="Zip" />
        <input class="inputs" id="phone" name="phone" placeholder="Phone" />
        <input class="inputs" id="email" name="email" placeholder="Email"/>
      </div>
      <button id="nextBtn"></button>
    </div>
  </div>

  <script src="contactInfo.js"></script>

</body>

</html>

Like I said, I've been trying to get this portion of user input to write to the Firebase all day with no luck on button click unless I remove the function to go to the next page, but that's my ultimate goal is to write and then take them to the next page.

Upvotes: 0

Views: 461

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598857

You need to wait for the write to the database to complete before you transition to the next page.

One common way to do this, is to use the Promise that push() returns. Once the write complete, the then() method of the promise is called and you can safely change the window location:

var firebaseRef = firebase.database().ref();
firebaseRef.child("Contact Info").push({
    Name: _mvrName,
    Address: _mvrAddress,
    Zip: _mvrZip,
    Email: _mvrEmail,
    Phone: _mvrPhone,
    Date_Created: date
}).then(function() {
    secondStep();
});

The rest of your code can remain unchanged.

Upvotes: 2

Related Questions