How to save HTML input in Firebase?

Viewed 617

I am trying to create a diary web-app. In order to save the values, I created a Google Firebase Account. However, I have followed several tutorials and can't seem to save my HTML inputs to Firebase. In the tutorial, the submitted entries appear in Firebase, but in my case they don't.

Any insights in what else I could check? In the tutorials, they only paste their Configuration directly from Firebase and then add the database SKD:

<script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-database.js"></script>

Here is the code I am currently using:

<!DOCTYPE html>
<html>
<head>
    <title>My Firebase Tutorial</title>
</head>
<body>
    <input type="text" placeholder="name" id="nameField">
    <input type="text" placeholder="age" id="ageField">
    <button onclick = "writeData()"> Submit </button>


    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
         https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-database.js"></script>

    <script>
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      var firebaseConfig = {
        apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        authDomain: "tutorial-1b13c.firebaseapp.com",
        projectId: "tutorial-1b13c",
        storageBucket: "tutorial-1b13c.appspot.com",
        messagingSenderId: "778382154294",
        appId: "yyyyyyyyyyyyyyyyyyyyyyyyyyyyy",
        measurementId: "G-5WR3S3W0N2"
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      firebase.analytics();

      //add function 
      function writeData() {
        firebase.database().ref("User").set({
            name: document.getElementById("nameField").value,
            Age: document.getElementById ("ageField").value
        });
      }
    </script>

    
</body>
</html>




<!--
    1. Enter Firebase Config at the bottom of the body
    2. Create some HTML body elements to input data (2 inputs: name & age; 1 Submit button)
    3. Add JS function to button via onclick
-->

Appreciate your insights!

2 Answers

Solved: I was missing the databaseURL in the Firebase Configuration part. Many thanks to everyone who took the time to read through this. Further, as suggested by Klaassiek@ I had a syntax error so my writeData() function was never called:

<button onclick="writeData()"> Submit </button>

Your function writeData() will never be called. There is a mistake in the syntax; you have space between onclick, =, and "writeData()":

<button onclick="writeData()"> Submit </button>
Related