Firebase - write new data to database from web application form

Question

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

There are a few problems here. 1) your rules require the user to be logged in, but you don't use Firebase Authentication anywhere. See here to get started 2) you're using the Realtime Database, but are showing security rules for Cloud Firestore. While both databases are part of Firebase, they are completely separate, and the security rules for one have no influence on the other. To set the correct security rules, see stackoverflow.com/questions/52126720/… — Frank van Puffelen
– Frank van Puffelen, Commented Oct 15, 2018 at 1:23
Firebase authentication happens on the index.html page, which redirects to home.html. Also, switching to Realtime and changing the rules unfortunately did not fix my problem. — gbm0102
– gbm0102, Commented Oct 15, 2018 at 1:52
You may still have a problem, but changing the wrong rules definitely would also ensure it didn't work. If you show your new rules, I can check and (of they're indeed seem correct) vote to reopen the question. — Frank van Puffelen
– Frank van Puffelen, Commented Oct 15, 2018 at 2:28
With those rules there is no way that they'll reject the write operation. If you set a breakpoint on rootRef.push().set({, does it actually hit that code? Also: if you replace the current write with rootRef.push(true);, does the write make it to the database? — Frank van Puffelen
– Frank van Puffelen, Commented Oct 15, 2018 at 2:48

Alchemist Shahed · Accepted Answer · 2018-10-14 22:49:47Z

1

I suspect your root reference might be off. Maybe try this:

var ref = firbase.database().ref(<ROOT_REF>)
var rootRef = ref.child('graduate')

answered Oct 14, 2018 at 22:49

Alchemist Shahed

3512 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Frank van Puffelen · Accepted Answer · 2018-10-15 01:20:30Z

0

You have changed the authorization in the database, by default it only allows writing when the user is logged in.

edited Oct 15, 2018 at 1:20

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

answered Oct 14, 2018 at 22:58

Robert Sousa

1

Comments

gbm0102 · Accepted Answer · 2018-10-15 17:25:02Z

I was able to make my program work. Per this site, I needed to move my .js files outside of the head. I moved them right before the closing body tag.

<!DOCTYPE html>
<html>
    <head>
        <title>Department of English | Student Tracking</title>
        <script src="https://www.gstatic.com/firebasejs/5.5.3/firebase.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" />
    </head>
    <body>
    <div id="container">
            <header>
                <img src="olemiss.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>
                    <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>
                        <fieldset>
                                <legend>Program</legend>
                                <ul>
                                    <li>
                                      <label for="title_1">
                                        <input type="radio" id="undergraduate" name="title" value="Undergraduate" >
                                        Undergraduate
                                      </label>
                                    </li>
                                    <li>
                                      <label for="title_2">
                                        <input type="radio" id="graduate" name="title" value="Graduate">
                                        Graduate
                                      </label>
                                    </li>
                                </ul>
                        </fieldset><br>
                        <label for="Field3">Graduate Year (XXXX):</label><br>
                        <input id="gradDate" name="Field3" type="text" value=""><br><br>

                        <input id="saveForm" name="saveForm" type="submit" value="Submit Form">
                    </form>
            </header>
        </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="app.js"></script>
    <script src="authentication.js"></script>
    </body>
</html>

Collectives™ on Stack Overflow

Firebase - write new data to database from web application form

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related