olivergeorge/form_logic.html

## form_logic.html
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
		<script src="http://www.plexical.com/sandbox/jsdeps/json2.js"></script>
		<script src="http://www.plexical.com/sandbox/jsdeps/underscore.js"></script>
		<script src="http://www.plexical.com/sandbox/jsdeps/backbone.js"></script>

		<script type="text/javascript" charset="utf-8">

		$(function(){

			// Generic Form Listener
			var FormListener = Backbone.View.extend({
				events: {
					'change :input': 'input_changed',
				},
				input_changed: function() {
					var nvs = $(this.el).serializeArray();
					var attributes = {};
					for (var i=0; i<nvs.length; i++) {
						var nv = nvs[i];
						attributes[nv.name]=nv.value;
					}
					this.model.set(attributes);
				},
				initialize: function() {
					this.input_changed();
				}
			});

			// Update classes based on model data (aka form data)
			var FormModel = Backbone.Model.extend();
			window.form_model = new FormModel();
			window.form_model.bind('change:room_choice', function(model, room_choice) {
				var el=$('body');
				(room_choice==2) ? el.addClass("double_room") : el.removeClass("double_room");
				(room_choice==1) ? el.addClass("single_room") : el.removeClass("single_room");
				(room_choice==0) ? el.addClass("sharing_room") : el.removeClass("sharing_room");
			});
			window.from_listener = new FormListener({
				model: window.form_model,
				el: $('form'),
			});

		});

		</script>

	</head>
	<body>
		<div id="steps">STEP 2 of 5</div>
		<form method="POST" action="" >
			...
			<input type="submit"/>
		</form>
	</body>
</html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
	<script src="http://www.plexical.com/sandbox/jsdeps/json2.js"></script>
	<script src="http://www.plexical.com/sandbox/jsdeps/underscore.js"></script>
	<script src="http://www.plexical.com/sandbox/jsdeps/backbone.js"></script>

	<script type="text/javascript" charset="utf-8">

	$(function(){

	// Generic Form Listener
	var FormListener = Backbone.View.extend({
	events: {
	'change :input': 'input_changed',
	},
	input_changed: function() {
	var nvs = $(this.el).serializeArray();
	var attributes = {};
	for (var i=0; i<nvs.length; i++) {
	var nv = nvs[i];
	attributes[nv.name]=nv.value;
	}
	this.model.set(attributes);
	},
	initialize: function() {
	this.input_changed();
	}
	});

	// Update classes based on model data (aka form data)
	var FormModel = Backbone.Model.extend();
	window.form_model = new FormModel();
	window.form_model.bind('change:room_choice', function(model, room_choice) {
	var el=$('body');
	(room_choice==2) ? el.addClass("double_room") : el.removeClass("double_room");
	(room_choice==1) ? el.addClass("single_room") : el.removeClass("single_room");
	(room_choice==0) ? el.addClass("sharing_room") : el.removeClass("sharing_room");
	});
	window.from_listener = new FormListener({
	model: window.form_model,
	el: $('form'),
	});

	});

	</script>

	</head>
	<body>
	<div id="steps">STEP 2 of 5</div>
	<form method="POST" action="" >
	...
	<input type="submit"/>
	</form>
	</body>
	</html>