acbrent25
9/4/2017 - 5:47 PM

More Properties Example

More Properties Example

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en-us">

<head>

  <meta charset="UTF-8">
  <title>More Properties!</title>

  <!-- Firebase Reference -->
  <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>

</head>

<body>

  <!-- An utterly ugly form! -->
  <label for="name-input">Name:</label>
  <input class="form-control" id="name-input" type="text">
  <label for="age-input">Age:</label>
  <input class="form-control" id="age-input" type="text">
  <label for="phone-input">Phone:</label>
  <input class="form-control" id="phone-input" type="text">

  <!-- Submit Button -->
  <button id="click-button" type="submit">Submit</button>

  <hr>

  <!-- Displayed Data -->
  <div id="displayed-data"></div>

  <!-- ====================================================================== -->

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <!-- Script -->
  <script>
    // Initialize Firebase and change the values of the config values with your own Firebase config values.
    var config = {
      apiKey: "AIzaSyC9QlOZmk3D4Wt8kAVji0-BO4jsYDvwwLY",
      authDomain: "fir-multiple-properties.firebaseapp.com",
      databaseURL: "https://fir-multiple-properties.firebaseio.com",
      storageBucket: "fir-multiple-properties.appspot.com"
    };

    firebase.initializeApp(config);

    // Create a variable to reference the database
    var database = firebase.database();

    // Initial Variables (SET the first set IN FIREBASE FIRST)
    // Note remember to create these same variables in Firebase!
    var name = "";
    var age = "";
    var phone = "";

    // Click Button changes what is stored in firebase
    $("#click-button").on("click", function() {
      // Prevent the page from refreshing
      event.preventDefault();

      // Get inputs
      name = $("#name-input").val().trim();
      age = $("#age-input").val().trim();
      phone = $("#phone-input").val().trim();

      // Change what is saved in firebase
      database.ref().set({
        name: name,
        age: age,
        phone: phone
      });
    });

    // Firebase is always watching for changes to the data.
    // When changes occurs it will print them to console and html
    database.ref().on("value", function(snapshot) {

      // Print the initial data to the console.
      console.log(snapshot.val());

      // Log the value of the various properties
      console.log(snapshot.val().name);
      console.log(snapshot.val().age);
      console.log(snapshot.val().phone);

      // Change the HTML
      $("#displayed-data").html(snapshot.val().name + " | " + snapshot.val().age + " | " + snapshot.val().phone);

      // If any errors are experienced, log them to console.
    }, function(errorObject) {
      console.log("The read failed: " + errorObject.code);
    });
  </script>

</body>

</html>