2017-08-12 50 views
0

我已经尝试了不同的解决方案整天,我无法让我的表单将它的用户输入内容写入Firebase。规则目前对所有人开放,所以我知道这不是问题。这是在三个单独的页面上的三步注册过程,但是,第一步(或第一页的用户输入)不会写入数据库,而其他人可以正常工作,而且我的设置方式也相同。不写入Firebase的用户输入

在这一点上,我已经完全失去了,因为我已经尝试了一切。

这里是我的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'; 
} 

如果我删除了“secondStep()方法调用,然后将数据写入火力地堡,但如果我不这么做,它进入到下一个页面上按一下按钮,但数据不会写入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> 

就像我说的,我一直在试图获取用户输入的这部分写入火力地堡整天按钮点击没有运气,除非我删除功能转到下一页,但这是我的最终目标是编写,然后将它们带到下一页。

回答

2

在转换到下一页之前,您需要等待写入数据库才能完成。

一个常见的方法是使用push()返回的Promise。一旦写入完成,承诺的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