Home / Questions / 226377
Accepted
k1k4ss0
Asked: 2020-12-31 11:03:55 +0800 CST 2020-12-31 11:03:55 +0800 CST

firebase not working

  • 772

I am making a web page in which I use booststrap and firebase. Total that I have the form to collect user data to later send it to firebase to add it to the database.

I have searched for information on why it does not work (the data is not uploaded to the database), but I have not found anything, the html code is as follows:

    <html>
        <meta charset="UTF-8">
        <head>

            <title>Casco cines</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
            <link rel="stylesheet" href="rectk_complicaciones.css" type="text/css" />
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>



        </head>



        <body>



           <nav class="navbar navbar-expand-lg navbar-light bg-light">
           <a class="navbar-brand" href="Index.html">Casco cines</a>

           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">

              <span class="navbar-toggler-icon"></span>

           </button>

           <div class="collapse navbar-collapse" id="navbarTogglerDemo02">


                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">

                  <a class="nav-link" href="Top.html">Top <span class="sr-only">(current)</span></a>

                </li>
                <li class="nav-item active">

                    <a class="nav-link" href="categoria.html">Categoria <span class="sr-only">(current)</span></a>

                </li>
                <li class="nav-item active">

                    <a class="nav-link" href="at_cliente.html">Atención al cliente <span class="sr-only">(current)</span></a>

                </li>

                </ul>


                <form class="form-inline my-2 my-lg-0">


                  <a class="navbar-brand" href="login.html">Log in</a>




                </form>


            </div>


        </nav>




        <div>  
           <!-- aca va un espacio -->
           </br>




        </div>
            <div id="SignIn">

                <div class="container">
                    <div id="SignIn-row" class="row justify-content-center align-items-center">
                        <div id="SignIn-column" class="col-md-6">
                            <div class="SignIn-box col-md-12">


                                <form id="SignIn-form" class="form" action="" method="post">
                                    <h3 class="text-center text-info text-dark ">Sign In</h3>


                                    <div class="form-group">
                                        <label for="name" class="text-info text-dark">Name:</label><br>
                                        <input type="text" name="name" id="name" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="surname" class="text-info text-dark">Surname:</label><br>
                                        <input type="text" name="surname" id="surname" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="email" class="text-info text-dark">Email:</label><br>
                                        <input type="text" name="email" id="email" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="inputPassword" class="text-info text-dark">Password:</label><br>
                                        <input type="password" class="form-control" id="inputPassword">
                                    </div>

                                    <div class="form-group">
                                        <label for="repeatpassword" class="text-info text-dark">Repeat Password:</label><br>
                                        <input type="password" class="form-control" id="repeatpassword">
                                    </div>

                                    <div class=" text-center form-group ">


                                        <button type="button" id="end-pls" onClick="aux()" class="btn btn-danger">Registrate</button>

                                       <!-- <script src="https://www.gstatic.com/firebasejs/5.7.2/firebase.js"></script> -->
                                        <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
                                        <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-firestore.js"></script>
                                        <script>   // Initialize Firebase


                                          var config = {
                                            apiKey: "XXXXXXXXXXX",
                                            authDomain: "xxxxxxxxx",
                                            databaseURL: "xxxxxxxxxxx",
                                            projectId: "xxxxxxxx",
                                            storageBucket: "xxxxxx-xxxxxx.appspot.com",
                                            messagingSenderId: "xxxxxx"
                                          };
                                          firebase.initializeApp(config);

                                          var db= firebase.firestore();



                                         const btn = document.getElementById("end-pls");

                                         btn.addEventListener('click',e=>{

                                         const name = document.getElementById("name").value;
                                         const surname = document.getElementById("surname").value;
                                         const pass=document.getElementById("pass");
                                         const email = document.getElementById("email");




                                          db.collection("Usuarios").add({
                                                name: name,
                                                surname:surname,
                                                pass: pass,
                                                email:email
                                            })
                                            .then(function(docRef) {
                                                console.log("Document written with ID: ", docRef.id);
                                            })
                                            .catch(function(error) {
                                                console.error("Error adding document: ", error);
                                            });

                                             });




                                        </script>
                                    </div>





                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>




        </body>

    </html>

In firestone I have the following rules:

    service cloud.firestore {
      match /databases/{database}/documents {
        match /{document=**} {
          allow read, write;
        }
      }
    }

And finally, in the data I have in the "Usuarios" collection, in document "0" (but my idea is that they are created automatically, that's why I try to use collection(...).add) and the collection would be :email, name, pass, surname.

Many thanks in advance for all the help.

javascript

1 Answers

  1. Best Answer

    Ok, I mentioned above not to publish your credentials on the Internet just because of what I just did, but it's just to help, going from that, I used your app to store a document and it seems that everything went well.

    To identify the problem

    You should do a console.log(err)in the callback function to know what is happening, personally I couldn't debug this error, but I managed to be successful when storing and reading the document, using the same configuration that you have, this means that it works. My personal opinion is that there is an error in some data of the document that you want to enter, I could see that in your code you are using the values ​​of the form fields and both passand emailyou are not asking for the value since you do not use .valueboth.

    My code:

    var config = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXX.firebaseapp.com",
  databaseURL: "https://XXXXXXXX.firebaseio.com",
  projectId: "XXXXX-XXXXX",
  storageBucket: "XXXXXX.appspot.com",
  messagingSenderId: "XXXXXXXXX"
};
firebase.initializeApp(config);

 var db= firebase.firestore();

const btn1 = document.getElementById("send-pls");
const btn2 = document.getElementById("get-pls"):

btn1.addEventListener('click',e => {
 db.collection("users").doc("SF").set({
    name: "San Francisco", state: "CA", country: "USA",
    capital: false, 
    population: 860000 
    }).catch(function(err){
        console.log(err)
    });


});

//EL ENVIÓ FUE EXITOSO

btn2.addEventListener('click',e => {
 db.collection("users").doc("SF").get().then(function(doc) {
    if (doc.exists) {
        console.log("Document data:", doc.data());
    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
}).catch(function(error) {
    console.log("Error getting document:", error);
});


});


//LA RESPUESTA:

Document data: {capital: false, country: "USA", name: "San Francisco", population: 860000, state: "CA"}

    In conclusion:

    Your configuration is well done, the problem may be in the data type you are sending, look in the Data Types documentation and you will notice that it does not support html elements and when sending document.getElementById("email")etas it sends this: <input id="email">instead of the input value.

    I hope it helps, greetings.

    • 2