By assigning the submit type to your button, your form is submitted before the Firebase push() method is triggered.
Changing the type to button and attaching a click event to this button, as follows, should do the trick:
HTML
<form id="markerForm" method="post" role="form" class="contactForm">
//...
<center><button id="formbutton" type="button" class="btn btn-primary btn-submit">SUBMIT</button></center>
</div>
</form>
JS (index.js)
var config = {
// my config details
};
firebase.initializeApp(config);
var ref = firebase.database().ref("markers");
var submit = function () {
var name = $("#name").val();
var email = $("#email").val();
var address = $("#address").val();
var subject = $("#subject").val();
var message = $("#message").val();
ref.push({
"name": name,
"email": email,
"address": address,
"subject": subject,
"message": message
})
.then(function(ref) {
console.log(ref.parent + "/" + ref.key);
})
.catch(function(error) {
console.log(error);
})
};
$("#formbutton").click(function() {
submit();
});
See the W3 specification for more detail on the button types.
Also do not forget to wrap your jquery code in $( document ).ready(), see https://learn.jquery.com/using-jquery-core/document-ready/
I am making an HTML form and trying to store the results in firebase. Here is a picture of my Firebase layout:
However, when I submit the form, the entries do not go into Firebase, and I’m not sure why. Here is my HTML code in index.html:
<section id="input" class="section-padding wow fadeInUp delay-05s">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="service-title pad-bt15">Add a Marker</h2>
<p class="sub-title pad-bt15">If you are in need of assistance, fill out the details below, and a marker will be<br>placed on the map for others to view and respond to.</p>
<hr class="bottom-line">
</div>
</div>
</div>
<div class="contact-form">
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<form id="markerForm" method="post" role="form" class="contactForm">
<div class="col-md-3"></div>
<div class="col-md-3">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" />
<div class="validation"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" />
<div class="validation"></div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<input type="text" class="form-control" name="address" id="address" placeholder="Address" />
<div class="validation"></div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" />
<div class="validation"></div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<textarea class="form-control" id="message" name="message" rows="5" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<center><button id="formbutton" type="submit" class="btn btn-primary btn-submit">SUBMIT</button></center>
</div>
</form>
</div>
</section>
Note that in the <head> tag in the HTML file, I am calling this:
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
And at the very beginning of <body>, I call this:
<script src="index.js"></script>
And here is my JS code in index.js:
var config = {
// my config details
};
firebase.initializeApp(config);
var ref = firebase.database().ref("markers");
var submit = function () {
var name = $("#name").val();
var email = $("#email").val();
var address = $("#address").val();
var subject = $("#subject").val();
var message = $("#message").val();
ref.push({
"name": name,
"email": email,
"address": address,
"subject": subject,
"message": message
});
};
$(window).load(function () {
$("#markerForm").submit(submit);
});
Please let me know what the problem is. thanks
