How do I get value from input field and sent it to server firebase

Question

My goal is to get a value from the input element, store it in an object and send this object to firebase. The data doesn't seem to get saved. user.name and user.surname show undefined after I write something in the input. I have tried code below:

Html code:

<form>
    First name:<br>
    <input type="text" class="firstname"><br>
    Last name:<br>
    <input type="text" class="lastname">
    <br><br>
   <button id="button" type="submit">Submit</button> 
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="index.js"></script>

Javascript code:

const but = document.getElementById("button");
const url = "https://xxxxxx.firebaseio.com/post.json";
const user = {
    name: document.querySelector(".firstname").value,
    surname: document.querySelector(".lastname").value
};


class Search {
    constructor(query) {
        this.query = query;
    }

async Getresult() {
    try {
        axios.post(url, JSON.stringify(this.query))
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                alert(error);
            });

    } catch (error) {
        alert(error);
    }
}
}

const search = new Search(user);

but.addEventListener("click", function (e) {  
    e.preventDefault();
    search.Getresult();
 });

Answer 1

Your code for getting values of the input elements only fires once when loading the page. You could fetch the values when handling the btn click to ensure that you have the latest data. Example:

const but = document.getElementById("button");
const url = "https://xxxxxx.firebaseio.com/post.json";

class Search {
    async Getresult(query) {
        try {
            axios.post(url, JSON.stringify(query))
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    alert(error);
                });

        } catch (error) {
            alert(error);
        }
    }
}

const search = new Search();

but.addEventListener("click", function (e) {
    const user = {
        name: document.querySelector(".firstname").value,
        surname: document.querySelector(".lastname").value
    };

    e.preventDefault();
    search.Getresult(user);
});

If you want to pass the user in the constructor you would have to create a new instance of Search when handling the btn click:

const but = document.getElementById("button");
const url = "https://xxxxxx.firebaseio.com/post.json";

class Search {
    constructor(query) {
        this.query = query;
    }

    async Getresult() {
        try {
            axios.post(url, JSON.stringify(this.query))
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    alert(error);
                });

        } catch (error) {
            alert(error);
        }
    }
}


but.addEventListener("click", function (e) {
    e.preventDefault();

    const user = {
        name: document.querySelector(".firstname").value,
        surname: document.querySelector(".lastname").value
    };

    const search = new Search(user);

    search.Getresult();
});