Am trying to Connect Firebase to a Contact Form,
where requires the user to type and submit Fullname , Email and also Message.
But I face Uncaught ReferenceError: firebase is not defined at my main.js file
form my console.
I tried different solution but I couldn't be able to solve it.
Here is my script tag in my index.html
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
</script>
<script src="main.js"></script>
here is my Main.js code
var config = {
apiKey: "xxxxx",
authDomain: "xxxxx",
databaseURL: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxx"
};
firebase.initializeApp(config);
var emailRef = firebase.database().ref('emails');
// Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm);
// Submit form
function submitForm(e){
e.preventDefault();
//Get values
var FullName = getInputval('FullName');
var Email =getInputval('Email');
// save message
saveMessage(FullName,Email);
// Show alert
document.querySelector('.alert').style.display = 'block';
// Hide alert after 3 seconds
setTimeout(function(){
document.querySelector('.alert').style.display = 'none';
},3000);
// Clear form
document.getElementById('contactForm').reset();
}
// Function to get form values
function getInputval(id){
return document.getElementById(id).value;
}
// Save message to firebase
function saveMessage(Fullname, Email,){
var newEmailRef = emailRef.push();
newEmailRef.set({
Fullname: Fullname,
Email:Email
});
}
Since you're initializing firebase here, it should be something like this:
const firebase = initializeApp(config);
For more info you can have a look here.
Related
I tried making a simple chat forum using YouTube tutorial. upon its release it works wonderful so I tried using its code structure while updating the core infos and it only result in an error. I tried many time to avail, I'm new to programming so im looking for help.
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js"</script>
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-database.js"</script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyCTBkpUWMU_pL6qIb_hMXVDS_sCYQ2BROU",
authDomain: "rd-try-ce276.firebaseapp.com",
databaseURL: "https://rd-try-ce276-default-rtdb.firebaseio.com",
projectId: "rd-try-ce276",
storageBucket: "rd-try-ce276.appspot.com",
messagingSenderId: "47874427531",
appId: "1:47874427531:web:819f34b203e6ae82c0628e"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log(firebase);
function sendMessage() {
alert("Hello! I am an alert box!");
//get message
var message = document.getElementById("message").value;
//save in database
firebase.database().ref("messages").push().set({
"message": message
})
}
</script>
im getting error while connecting my html code to firebase database
const firebaseConfig = {
apiKey: "AIzaSyBSu7dx2w4GY6_HiPYyv0Gj_xDddoPa8hI",
authDomain: "assistant2-139ff.firebaseapp.com",
databaseURL: "https://assistant2-139ff-default-rtdb.firebaseio.com",
projectId: "assistant2-139ff",
storageBucket: "assistant2-139ff.appspot.com",
messagingSenderId: "888617709384",
appId: "1:888617709384:web:a325963680f27cccea4d7d",
measurementId: "G-W9NKQV6N45"
};
// Reference messages collection
var messagesRef = firebase.database().ref('Login Details');
// Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm);
// Submit form
function submitForm(e){
e.preventDefault();
/* // Get values
var name = getInputVal('fullname');
var name = getInputVal('email');
var password = getInputVal('password');
// Save message
saveMessage(fullname, email, password);*/
console.log(123);
}
I was reading through Firebase web documentation on reading and writing data from a database, I want to add dynamic counters on my github website so i figured Firebase would be the way to go, I attempted to use code found on the documentation as an example, but the example simply outputs an error "Uncaught SyntaxError: Illegal return statement", below is my testing code i ran, the error occurred at line 22(the return statement)
<body>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDsjjwO1Jj0VKeZECp6l2NRgOKy9Yb0fYc",
authDomain: "site-counter-555dd.firebaseapp.com",
databaseURL: "https://site-counter-555dd.firebaseio.com",
projectId: "site-counter-555dd",
storageBucket: "site-counter-555dd.appspot.com",
messagingSenderId: "796019929207",
appId: "1:796019929207:web:51db340ecf1a53891e1672",
measurementId: "G-33WHDZ8X6K"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script>
var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/Downloads' + userId).once('value').then(function(snapshot) {
var username = (snapshot.val() && snapshot.val().username) || 'Anonymous'
});
</script></body>
You're trying to use a return statement that's not within a function. Start by removing the return - there is nothing to return from.
I'm making login Authentication with Firebase and I'm testing it with creating a user ID and password on authentication Firebase and test login with that email and password. But I got no response both correct password and wrong password. Please help!
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "....",
authDomain: "....",
databaseURL: "....",
projectId: "....",
storageBucket: "....",
messagingSenderId: "....",
appId: "....",
measurementId: "...."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
document.getElementById("idLogin").onclick = function() {
var email = document.getElementById('idUser').value;
var password = document.getElementById('idPassword').value;
firebase.auth().signInWithEmailAndPassword(email, password)
.then(function(){
alert('login success');
console.log('success');
}).catch(function(error) {
alert('login fail');
console.log('error');
})
}
</script>
What is most probably happening is that since the element with id="idLogin" is of type submit your form is submitted before the Firebase signInWithEmailAndPassword() method is triggered.
You need to explicitly specify the button type as button, (and not submit) as follows:
<button type="button" id="idLogin">Login</button>
See the W3 specification for more detail.
I'm trying to link my contact form in a portfolio website to firebase and keep getting (firebase.database is not a function) in my console
This is for the web, using pure javascript
var firebaseConfig = {
apiKey: "AIzaSyCzX3r8CFw84WSBuCSXR1fWM_hDrwtGMSs",
authDomain: "portfolio-4c243.firebaseapp.com",
databaseURL: "https://portfolio-4c243.firebaseio.com",
projectId: "portfolio-4c243",
storageBucket: "",
messagingSenderId: "745737502175",
appId: "1:745737502175:web:a26e5b0baa3769c9"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var messagesRef = firebase.database().ref('messages');
document.getElementById('contactForm').addEventListener('submit', submitForm);
function submitForm(e) {
e.preventDefault();
var name = getInputVal('name');
var email = getInputVal('email');
var message = getInputVal('message');
saveMessage(name, email, message);
}
// Function get value
function getInputVal(id) {
return document.getElementById(id).value;
}
//Save
function saveMessage(name, email, message) {
var newMessageRef = messagesRef.push();
newMessageRef.set({
name: name,
email: email,
message: message
})
}
This error is very common and arises because either you have not configured your config object correctly or the script tag required for using that particular functionality is missing.
In your case the config object looks fine so you have to add this script in your page
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-database.js"></script>
But please note that this script is to be added only after the core script for firebase app
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
and for future if you want to use any other service from Firebase like Firestore or so, just make sure you have that particular script tag in there (with the config object correctly setted up).