How to save HTML input in Firebase?

Question

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!

You should include any relevant console logs and also attach a [`.catch()` handler](https://web.dev/promises/#error-handling) to that database set operation. If the tutorials you are using are omitting error-handling, find a better tutorial. — samthecodingman, Apr 18 '21 at 12:37
@samthecodingman 1) how can I add the console logs? I simply created the site in Sublime and then let opened it in the browser. 2) Thank you for the link — Johann, Apr 18 '21 at 13:16

Johann · Answer 1 · 2021-04-18T16:43:27.817

1

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>

edited Apr 18 '21 at 16:43

answered Apr 18 '21 at 16:02

Johann

51
3

Klaassiek · Answer 2 · 2021-04-18T16:05:35.380

0

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>

edited Apr 18 '21 at 16:05

answered Apr 18 '21 at 14:36

Klaassiek

2,795
1
23
41

Thank you, for removing the apiKey, I was not aware this is confidential as the tutorial said this can be shared! The way I understood the code is, that the function "write data()" is called in the HTML button "on-click" event. – Johann Apr 18 '21 at 16:01
Sorry, I didn't read your code with enough attention. But I did find a syntax error that you might have overlooked. See my completely revised answer. – Klaassiek Apr 18 '21 at 16:06
@Johann Krehn: I didn't remove your ` apiKey`; someone else did. You can use your `apiKey` in javascript though: https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public#answer-37484053 – Klaassiek Apr 18 '21 at 21:08

How to save HTML input in Firebase?

2 Answers2