Question

如何为姓氏添加另一个TextInputField以及如何将其保存在Firebase数据库中。谁能帮我或告诉我我该怎么办？

(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'https://www.gstatic.com/firebasejs/3.0.2/firebase.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();

_setFormData = function setFormData (sel, data) {
  console.info('setting form to data', data);
  var inputList = document.querySelectorAll(sel + ' [name]');
  [].forEach.call(inputList, function(input) {
      console.log(input);
      if (data[input.name] && data[input.name] !== "undefined") {
        input.value = data[input.name];
      }
  });
};
var _fb;
var fbToForm = function fbToForm (key, sel) {
    var config = config || {
        apiKey: "<REPLACE ME>",
        authDomain: "<REPLACE ME>",
        databaseURL: "<REPLACE ME>",
        storageBucket: "<REPLACE ME>",
    };
    _fb = _fb && _fb.name === "fbToForm" ? _fb : firebase.initializeApp(config, "fbToForm");
    _fb.database().ref('user-data/' + key).on('value', function(snapshot) {
        _setFormData(sel, snapshot.val());
    });
};


<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <title>Firebase Sample</title>
  </head>
  <body>
    <div class="container">
      <div class="page-header">
        <h1>Firebase Sample</h1>
      </div>
    </div>
    <div class="container row">
        <div class="col-xs-12">
            <h2>Instructions:</h2>
            <ul>
                <li>Create a firebase application on the <a href="https://console.firebase.google.com" target="blank">console</a></li>
                <li>Replace the information marked as &lt;REPLACE ME&gt; with the correct information from the project's console</li>
            </ul>
            <h2>Todo:</h2>
            <p><strong><a href="https://www.firebase.com/docs/web/guide/user-auth.html">Add User Login</a></strong></p>
            <p><strong><a href="https://www.firebase.com/docs/security/guide/user-security.html">Add Security Rules</a></strong></p>
        </div>
    </div>
    <div class="container row">
      <div class="col-xs-12">
        <div class="form">
          <form action="" class="form">
            <div class="control-group">
              <label for="first_name">Name</label>
              <input type="text" name="first_name">
            </div>
            <div>
              <button class="submit btn btn-primary">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="https://www.gstatic.com/firebasejs/3.0.2/firebase.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script>
    $.fn.getFormData = function() {
      var fields = this.find('[name]');
      var result = {};
      $.each(fields, function (i, el) {
        result[el.name] = el.value;
      });
      return result;
    };
      var config = {
          apiKey: "<REPLACE ME>",
          authDomain: "<REPLACE ME>",
          databaseURL: "<REPLACE ME>",
          storageBucket: "<REPLACE ME>",
      };
      var fb = firebase.initializeApp(config);
      var user_id;
      $('.submit').on('click', function (e) {
        e.preventDefault();
        var updates = {};
        user_id = user_id ? user_id : fb.database().ref().child('user-data').push().key;
        updates[user_id] = $('form').getFormData();
        fb.database().ref().child('user-data').update(updates);
      });
    </script>
  </body>
</html>

如何为Firebase添加文本输入字段？

0 个答案: