Ultimate Contact Form
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://raw.github.com/Nijikokun/bootstrap-notify/master/js/bootstrap-notify.js"></script>
<link rel="stylesheet" href="https://github.com/Nijikokun/bootstrap-notify/raw/master/css/bootstrap-notify.css">
<div class='notifications top-left'></div>
<form id="contact_form" class="well span8" data-bind="with:ContactData">
<div class="row">
<div class="span3">
<label>Email</label>
<input id="email" name="email" type="text" class=" required email"
placeholder="Email" data-bind="value:Email" />
<label>First Name</label>
<input id="first_name" name="first_name" type="text"
class="required" placeholder="First Name" data-bind="value:FirstName" />
<label>Last Name</label>
<input id="last_name" name="last_name" type="text" class="required"
placeholder="Last Name" data-bind="value:LastName" />
</div>
<div class="span5">
<label>Subject</label>
<input id="subject" name="subject" type="text" placeholder="Subject" class="span5"
data-bind="value:Subject" />
<label>Message</label>
<textarea id="message" name="message" placeholder="Message"
class="input-xlarge span5" rows="10" data-bind="value:Message"></textarea>
<button id="submit" class="btn submit">Submit</button>
</div>
</div>
</form>
JavaScript
function ViewModel() {
var self = this;
self.ContactData = {
Email: ko.observable(),
FirstName: ko.observable(),
LastName: ko.observable(),
Subject: ko.observable(),
Message: ko.observable()
};
self.SubmitMessage = function () {
if ($("#contact_form").valid()) {
var data = ko.toJS(self.ContactData);
//TODO:Use $.post to send JSON data to the server
console.log(data);
$('.top-left').notify({
message: { text: 'Aw yeah, It works!'
}
}).show();
alert("ok"); }
};
}
$("#contact_form").delegate(".submit", "click", function (event) {
event.preventDefault();
vm.SubmitMessage();
});
var vm = new ViewModel();
ko.applyBindings(vm);