Skip to content

Instantly share code, notes, and snippets.

@orthodoc

orthodoc/fbtoform.js

Forked from dvidsilva/fbtoform.js
Created February 1, 2018 12:31
Show Gist options
  • Save orthodoc/15282f8143106ab1ef9a7b571c477454 to your computer and use it in GitHub Desktop.
Save orthodoc/15282f8143106ab1ef9a7b571c477454 to your computer and use it in GitHub Desktop.
Download ZIP
HTMLForm to Firebase sample
Raw
fbtoform.js
(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());
});
};
Raw
index.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment