I've written a fairly simple form to be sent to my Firebase database, but my database doesn't seem to be updating with the new data from my submit.html page. I'm quite new to Firebase, and I've referenced the documentation, but I'm sure I've overlooked something. For testing purposes, the web application at this stage is meant to simply send a first and last name to my database, listed under a collection named graduate.
I also want to assign it a unique documentID/Auto-ID. Per the Firebase documentation:
[...] the Firebase JavaScript clients provide a push() function that generates a unique ID, or key, for each new child. By using unique child keys, several clients can add children to the same location at the same time without worrying about write conflicts.
This seems to be exactly what I'm looking for, and so I've included the push call with my function below.
I should also probably mentioned that I've written the following rule for my database:
{
/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
"rules": {
".read": true,
".write": true
}
}
Anyway, here is my code:
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Student Tracking</title>
<script src="authentication.js"></script>
<link rel="stylesheet" href="animate.css">
<link href="https://fonts.googleapis.com/css?family=Cormorant|Roboto:100" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="app.js"></script>
</head>
<body>
<div id="container">
<header>
<img src="logo.png" class="logo">
<h1 class="englogo">Department of English</h1>
<div class="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="submit.html">Submit</a></li>
<li><a href="query.asp">Query</a></li>
</ul>
</div>
<div id="contentform">
<form id="newUserForm">
<h3>Complete the following form to add your student information
to the database.
</h3>
<label for="Field1">First Name:</label><br>
<input id="userfName" name="Field1" type="text" value=""><br><br>
<label for="Field2">Last Name:</label><br>
<input id="userlName" name="Field2" type="text" value=""><br><br>
<label for="Field3"></label><br>
<input id="saveForm" name="saveForm" type="button" value="Submit Form">
</form>
</div>
</header>
</div>
</body>
</html>
My app.js:
var config = {
apiKey: "apiKey",
authDomain: "authDomain",
databaseURL: "url",
projectId: "proID",
storageBucket: "SB",
messagingSenderId: "sendID"
};
firebase.initializeApp(config);
var rootRef = firebase.database().ref().child('graduate');
$('#saveForm').click(function(){
rootRef.push().set({
firstName:$('#userfName').val(),
lastName:$('#userlName').val()
});
})
My CSS:
.logo {
display: inline-block;
margin: auto 0;
}
.google {
color: #0099CC;
background: transparent;
border: 1px solid #0099CC;
border-radius: 6px;
}
.nav {
position: relative;
float: right;
padding: 60px 20px 15px 10px;
text-align: right;
z-index: 1;
background: white;
margin: 0 auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-size: 1.3em;
}
.nav li a {
text-decoration: none;
color: black;
margin: 4px;
}
h1.englogo {
display: inline-block;
padding-left: 1%;
font-family: 'Cormorant', serif;
position: relative;
bottom: 15px;
}
header {
height: 100px;
width: 100%;
z-index: 10;
position: fixed;
border-bottom: solid thin;
background-color: white;
}
#content {
width: 100%;
text-align: center;
position: relative;
top: 200px;
height: 1500px;
font-family: 'Roboto', sans-serif;
}
#contentForm {
widows: 100%;
position: relative;
top: 150px;
height: 1500px;
}
form {
width: 100%;
position: relative;
top: 90px;
height: 1500px;
font-family: 'Roboto', sans-serif;
border: none;
}
