Writing to Firebase Database from HTML

Question

I am trying to write some data to Firebase from html. This process works; however, sometimes I get a 503 error and sometimes I also get a "deprecation" notice and also, when I click "submit" sometimes there's a long lag until the submission is complete. Is something written in correct or the process incorrect?

  <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>

 <script>
     var firebaseConfig = {
         apiKey: "AIzaSy333333CoLQMOkxO3rYLiywsrib6nCOWFBZv_xI0",
         authDomain: "dem33333otestingdata.firebaseapp.com",
         databaseURL: "https://dem33333otestingdata.firebaseio.com",
         storageBucket:"dem33333otestingdata.appspot.com",
     };
     firebase.initializeApp(firebaseConfig);

     function writeData() {
         firebase.database().ref("User").set({
             name:document.getElementById("nameField").value,
             age:document.getElementById("ageField").value
         });
     }

      </script>
      <h1>User Databse</h1>
      <input type="text" placeholder="name" id="nameField">
      <input type="text" placeholder="age" id="ageField">

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

Mukul Kumar Jha · Accepted Answer · 2019-07-03 11:41:15Z

1

Just try removing this script tag from your HTML file as this has been deprecated

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

and replace the following

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

with the latest CDN

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

edited Jul 3, 2019 at 11:41

answered Jul 3, 2019 at 11:35

Mukul Kumar Jha

1,0828 silver badges21 bronze badges

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

Comments

user26843453 · Accepted Answer · 2024-08-16 02:51:58Z

<title>Firebase Database Form</title>

<h1>Firebase Database Form</h1>

<form id="firebase-form">

    <label for="name">Name:</label>

    <input type="text" id="name" name="name"><br><br>

    <label for="email">Email:</label>

    <input type="email" id="email" name="email"><br><br>

    <label for="message">Message:</label>

    <textarea id="message" name="message"></textarea><br><br>

    <button type="submit">Submit</button>

</form>

<script>

    // Initialize Firebase

    const firebaseConfig = {

        apiKey: "AlzaSyAHQKF67PJq3853fyjfshj9yaApI-aPw",

        authDomain: "bmans.form.firebaseapp.com",

        databaseURL: "https://www.gstatic.com/firebasejs/11.30.5/firebase-app.js",

        projectId: "bmansform",

        storageBucket: "bmansform.appspot.com",

        messagingSenderId: "50456096588",

        appId: "1:5044746847898:web:9fda4943b25ac637536gf8yc7"

};

    firebase.initializeApp(firebaseConfig);



    // Get the form and form elements

    const form = document.getElementById("firebase-form");

    const nameInput = document.getElementById("name");

    const emailInput = document.getElementById("email");

    const messageInput = document.getElementById("message");

    

    // Add event listener for form submission

    form.addEventListener("submit", (e) => {

        e.preventDefault();

        const name = nameInput.value;

        const email = emailInput.value;

        const message = messageInput.value;

// Add event listener for form submission

    form.addEventListener("submit", (e) => {

        e.preventDefault();

        const name = nameInput.value;

        const email = emailInput.value;

        const message = messageInput.value;

        

        // Add data to Firebase Realtime Database

        firebase.database().ref("messages").push({

            name,

            email,

            message

        });

        

        // Clear form fields

        nameInput.value = "";

        emailInput.value = "";

        messageInput.value = "";

    });

Collectives™ on Stack Overflow

Writing to Firebase Database from HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related