There is a similar question to this but it’s from almost a decade ago.
I’ve got a HTML Form which gets filled out and console.log printed out. I’ve got my firebase database. I’m just having so many issues trying to get them to connect. I know the firebase database is set up correct as I’ve been able to connect and send hard coded data to it via a python script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<script src="https://www.gstatic.com/firebasejs/9.6.7/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.7/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.7/firebase-firestore.js"></script>
</head>
<body>
<h1>Form</h1>
<form id="contactForm">
<label for="first">First Name:</label><br>
<input type="text" id="first" name="first"><br>
<label for="last">Last Name:</label><br>
<input type="text" id="last" name="last"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="tel" id="phone" name="phone"><br><br>
<button type="submit">Submit</button>
</form>
<script src="app.js"></script>
</body>
</html>
I’ve tried many different ways to connect this via JS but I just cant seem to work it out
var firebaseConfig = {
apiKey: "APIKEY",
authDomain: "AUTHDOMAIN",
databaseURL: "DATABASEURL",
projectId: "PROJECTID",
storageBucket: "STORAGEBUCKET",
messagingSenderId: "MESSAGINGSENDERID",
appId: "APPID"
};
firebase.initializeApp(firebaseConfig);
var db = firebase.database();
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
print("Test")
var first = document.getElementById('first').value;
var last = document.getElementById('last').value;
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
print("Test2")
db.ref('users').push({
first : first,
last : last,
email : email,
phone : phone,
})
print("Test3")
.then(() => {
print("Test4")
console.log("Data submitted successfully.");
document.getElementById('contactForm').reset();
})
.catch((error) => {
console.error("Error submitting data: ", error);
});
});
from flask import Flask, request
app = Flask(__name__)
@app.route('/submit', methods=['POST'])
def submit_form():
data = request.form
print(data)
return 'Form submitted successfully'
if __name__ == '__main__':
app.run(debug=True)
I’m completely lost at this point and have absolute no clue. When I try to import
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
This seems to break for whatever reason console.log but if I don’t firebase is undefined.
I need help. Please