Menu
I created a signup page for the users and I want to store the entered signup details to FireStore when the user clicks the registration button. It didn't display any errors but the data isn't stored in firestore. My javascript file is:
var config = {
apiKey: "AIzaSyAJsAstiMsrB2QGJyoqiTELw0vsWFVVahw",
authDomain: "websignin-79fec.firebaseapp.com",
databaseURL: "https://websignin-79fec.firebaseio.com",
projectId: "websignin-79fec",
storageBucket: "",
messagingSenderId: "480214472501"
};
firebase.initializeApp(config);
var db=firebase.firestore();
const inputTextfield = document.querySelector("#firstname").value;// it takes the values from signup page.
const lastname = document.querySelector("#lastname").value;
const email = document.querySelector("#email").value;
const phonenumber = document.querySelector("#phone").value;
//const savebutton=document.querySelector("#submit");
console.log(inputTextfield);
const save=document.querySelector("#submit");
save.addEventListener("click",function() {
db.collection("deyaPayusers").add({
Name:inputTextfield,
Email:email,
PhoneNo:phonenumber,
laseName:lastname,
}).then(function() {
console.log("Document successfully wriiten!");
})
.catch(function(error) {
// The document probably doesn't exist.
console.error("Error writing document: ", error);
});
});
and my signup page is :
<!doctype html>
<html lang="en">
<head>
<title> deyaPay</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-app.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-firestore.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 style="text-align:center;"> Welcome to Signup page</h1>
<form action="home.html"method ="post" style="text-align:center" onsubmit="return myValidation();">
<div class="form-group">
<label> FirstName</label>
<input type="text" id="firstname"></br>
<label> Lastname</label>
<input type="text" id="lastname"></br>
<label> Email </label>
<input type="email" id="email"></br>
<label> Password </label>
<input type="password" id="pass"></br>
<label>Phonenumber</label>
<input type="text" id="phone"></br>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<input type="submit" value="Register" id="submit",>
<a href="login.html">already registered?</a>
</div>
</form>
<script type ="text/javascript">
function myValidation() {
var firestname=document.getElementById("firstname").value;
var lastname=document.getElementById("lastname").value;
var email=document.getElementById("email").value;
var pswd=document.getElementById("pass").value;
var phone=document.getElementById("phone").value;
if((firestname=='')&&(lastname=='')){
alert("enter firstname and lastname");
}
if(email==''){
alert("enter email");
}
if((pswd=='')||(pswd.length<9)){
alert("enter password and password must contain 9 characters");
}
if((phone=='')||(phone.length>10)||(phone.length<10)){
alert("phonenumber must contain 10 numbers.");
}
}
</script>
<script type ="text/javascript" src = "./app.js"></script>
</body>
</html>
How to store the data when user clicks the register button.
712
You need to create a collection on firestore and then add the collected data to that collection with a function. That's what worked for me, otherwise it is only stored in the authentication page.
z.B:
const profileCreation = (_profileInfo) => {
dataSource.collection("user").doc(_profileInfo.email).set(_profileInfo).then(function()
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With