In the application, the user can create his own bank. He enters the appropriate data into the fields and when you click on the "Add" button, the fields should be written to the database. But now when I click, I get an error – Uncaught FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom HTMLInputElement object (found in field bankName in document bank-items/AMgVThS6caX9BJuCeezJ)
How can it be solved?
const addBankButton = document.getElementById("add-bank");
const addBankFunc = () => {
addBankButton.addEventListener("click", (event) => {
event.preventDefault();
const bankName = document.getElementById("bank-name");
const interestRate = document.getElementById("interest-rate");
const maximumLoan = document.getElementById("maximum-loan");
const minimumDownPayment = document.getElementById("minimum-down-payment");
const loanTerm = document.getElementById("loan-term");
db.collection("bank-items").add({
bankName: bankName,
interestRate: interestRate,
maximumLoan: maximumLoan,
minimumDownPayment: minimumDownPayment,
loanTerm: loanTerm,
});
});
};
addBankFunc(); <form>
<input id="bank-name" type="text" placeholder="Bank name" />
<input id="interest-rate" type="text" placeholder="Interest rate" />
<input id="maximum-loan" type="text" placeholder="Maximum loan" />
<input id="minimum-down-payment" type="text" placeholder="Minimum down payment" />
<input id="loan-term" type="text" placeholder="Loan term" />
<button id="add-bank">Add bank</button>
</form>>Solution :
You should pass value of the input fields to Firestore (that would be a string/number) instead of the HTML element itself. Try getElementById return an Element object that is not a valid Firestore data type. Try refactoring the code as shown below:
const bankName = document.getElementById("bank-name").value;
// add .value for every element