2017-08-12 15 views
0

私は一日中さまざまなソリューションを試しましたが、ユーザー入力内容をFirebaseに書き込むためのフォームを取得できません。ルールは現在誰にでも公開されているので、問題ではないことは分かっています。これは3つの別々のページで3つのステップの登録プロセスですが、最初のステップ(または1ページ目のユーザー入力)はデータベースに書き込まれず、他のステップはうまく動作し、同じ方法でセットアップされます。ユーザー入力がFirebaseに書き込まれていない

この時点で、私はすべてを試してから完全に迷っています。

は、ここに私のJSです:私は「secondStep()」メソッドの呼び出しを削除した場合

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'; 
} 

は、データがFirebaseに書かれているが、私がいない場合、それは、ボタンのクリックで次のページに行くが、データはFirebaseに書き込まれません。

ここに私の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> 

私はに機能を削除しない限り、私はボタンをクリックしたときに、運に一日中Firebaseに書き込むために、ユーザー入力のこの部分を取得しようとしてきた、言ったように次のページに進みますが、それは私の最終的な目標は、次のページに書き込んでから、次のページに移動することです。

答えて

2

次のページに移行する前に、データベースへの書き込みが完了するまで待つ必要があります。

これを行う一般的な方法の1つは、Promiseであるpush()が返されます。書込み完了したら、約束のthen()メソッドが呼び出され、あなたが安全にウィンドウの位置を変更することができます。

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

あなたのコードの残りの部分は変わらないことができます。

+0

恐ろしい!おかげでフランク – mur7ay

関連する問題