Storing the newsletter emails in firebase DB

Author: sureshmangs

assets/js/main.js

@@ -203,13 +203,57 @@ jQuery(document).ready(function() {
   // Ensures valid email is supplied
   $(".subscribe").click(function () {
     if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(document.getElementById('email').value)) {
-      document.getElementById('email').value = ""
       document.getElementById('email').placeholder = "Thank you for subscribing to our newsletters."
     } else {
       document.getElementById('email').value = ""
       document.getElementById('email').placeholder = "Please enter a valid email address."
     }
   });
 })(jQuery);
-// News letter Form
-// use email
+
+
+
+// Storing Newsletter emails in Firebase DB
+
+// Your web app's Firebase configuration
+  var firebaseConfig = {
+            apiKey: "XXXXXXXXXXX",
+            authDomain: "XXXXXXXXXXX",
+            databaseURL: "XXXXXXXXXXX",
+            projectId: "XXXXXXXXXXX",
+            storageBucket: "XXXXXXXXXXX",
+            messagingSenderId: "XXXXXXXXXXX",
+            appId: "XXXXXXXXXXX",
+            measurementId: "XXXXXXXXXXX"
+        };
+
+  // Initialize Firebase
+  firebase.initializeApp(firebaseConfig);
+  firebase.analytics();
+
+// Reference messages collection
+var messagesRef = firebase.database().ref('Emails');
+
+document.getElementById('newsletterForm').addEventListener('submit', submitForm);
+
+//submit form
+function submitForm(e){
+  e.preventDefault();
+
+  // Get values
+  var email = document.getElementById("email").value;
+
+  // Save message
+  saveMessage(email);
+
+  // Clear form
+  document.getElementById('newsletterForm').reset();
+}
+
+// Save message to firebase
+function saveMessage(email){
+  var newMessageRef = messagesRef.push();
+  newMessageRef.set({
+    email:email
+  });
+}

index.html

@@ -820,12 +820,14 @@ <h3>Frequently Asked Questions</h3>
         <div class="col-sm-12">
           <div class="content">
             <h2>SUBSCRIBE TO OUR NEWSLETTER</h2>
-            <div class="input-group">
-              <input type="email" class="form-control" id="email" placeholder="Enter your email">
-              <span class="input-group-btn">
-                <button class="btn subscribe" type="submit" >Subscribe Now</button>
-              </span>
-            </div>
+            <form id="newsletterForm">
+              <div class="input-group">
+                	<input type="email" class="form-control" id="email" placeholder="Enter your email">
+                	<span class="input-group-btn">
+                  	<button class="btn subscribe" type="submit" >Subscribe Now</button>
+                	</span>
+              </div>
+            </form>
           </div>
         </div>
       </div>
@@ -882,6 +884,14 @@ <h4>Contact Us</h4>
   <script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
   <script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
 
+  <!-- The core Firebase JS SDK is always required and must be listed first -->
+  <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-database.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.6.1/firebase-analytics.js"></script>
+
   <!-- Template Main JS File -->
   <script src="assets/js/main.js"></script>