I want to submit data to cloud firestore document onclick of a button

Question

I want to add a document to a cloud firestore collection when clicking a button

I can add data in using the following when loading a page and not having it as a function

But for some reason it won't work when trying to use onclick on a button to call it as a function.

function addStudent(){

    const db = firebase.firestore();

       // Add a new document in collection "students"
        const student = db.collection("students").doc("BobJones");

        student.set({
            first_name: "Bob",
            last_name: "Jones",
            email: "jobesb@email.co.uk",
            completion_year: 2019,
            student_number: 1020
        })
        .then(function() {
            console.log("Document successfully written!");
        })
        .catch(function(error) {
            console.error("Error writing document: ", error);
        });
    };

 <button type="submit" class="btn btn-primary" onclick="addStudent()">
          Submit
        </button>

When running this without using a button and just on page load it works fine.

When using a button it doesn't work, I don't even get an error message so I am not sure if the onclick is triggering properly?

Thanks in advance :)

Possible duplicate of [JavaScript button onclick not working](https://stackoverflow.com/questions/42530261/javascript-button-onclick-not-working) — l2aelba, May 06 '19 at 10:57
I see no reason why it should not work. Could give more information? Do you use a JavaScript framework? Where is your code located? Do you import it? — Sebastian Vischer, May 06 '19 at 11:17
no framework used. Code is kept in a separate JS file that is linked at the bottom of the body - `` - after the firebase scripts. I have made a slight edit to the code as I thought that was the issue but doesn't appear so - added new line `const db = firebase.firestore();` — user1693026, May 07 '19 at 05:55

score 0 · Answer 1 · answered May 12 '19 at 09:33

I have managed to get this working using Jquery but sporadically and cannot figure out why it won't continuously work

It will work once, then when I change the data or even change the doc ID it will not add any new or update any docs. However if I go away for a while or change wifi and come back it works!?

I have tried removing cache etc. but it still doesn't work

$( document ).ready(function(){

        //call the firebase.app namespace and store it to the the constant app
    const app = firebase.app();
    //log detail to console. 
    console.log(app);


        $("#submitform").click(function () {
            //allows data to be written to the database from a form

            // set the student to the detail outlined
            const db = firebase.firestore();
            //create or update the identified document
            let student = db.collection("students").doc("tommy").set({
                //pull the data from the form using jquery and update the database
                first_name: $("#addStudentFirstName").val(),
                last_name: $("#addStudentLastName").val(),
                DOB: $("#addStudentDOB").val(),
                completion_year: $("#addStudentCompletionYear").val(),
                student_number: $("#addStudentNumber").val(),
                student_email: $("#addStudentEmail").val()
                })
                .then(function() {
                    console.log("Document successfully written!");
                })
                .catch(function(error) {
                    console.error("Error writing document: ", error);
                });

    });
});

score 0 · Answer 2 · answered Apr 13 '21 at 19:15

Try to make that button's type="button".

In my case I had this wrapped in a form and it was acting as a submit event and thus db.collection.<anymethod> is more like a Promise and thus submit event on the page probably kills that process.

Anyway, I am not a pro in javascript(and definitely not in jquery) so just trying to post in case if it helps anyone else.

I want to submit data to cloud firestore document onclick of a button

2 Answers2