https://www.indigenousmusic.ca/js/jquery.useableforms.js?t=1456784236

1/*****************************************/
2/** Usable Forms 2.0, November 2005     **/
3/** Written by ppk, www.quirksmode.org  **/
4/** Instructions for use on my site     **/
5/**                                     **/
6/** You may use or change this script   **/
7/** only when this copyright notice     **/
8/** is intact.                          **/
9/**                                     **/
10/** If you extend the script, please    **/
11/** add a short description and your    **/
12/** name below.                         **/
13/**                                     **/
14/** Dwayne Kristjanson 2010-07-26       **/
15/**  Converted to jQuery plugin.        **/
16/*****************************************/
17
18(function($) {
19	
20	$.fn.useableforms = function(selector){
21		
22		var ran = new Object();
23		
24		return $(selector).filter('[rel][rel!=""]').each(function() {
25			
26			var containerTag = this.nodeName.toLowerCase();
27			
28			// Add in styles to hide accessiblity text
29			$('head').append('<style>.accessibility{display: none}</style>');
30			
31			// Set up the waiting room for removed form fields
32			var waitingRoom = $('<div></div>', document);
33			
34			var hidden = new Object();
35			
36			var intoWaitingRoom = function(el){
37				var rel = el.attr('rel');
38				if (!rel || rel == 'none') return;
39				
40				if(hidden[rel]){
41					for(var i=0; i< hidden[rel].length; i++){
42						
43						waitingRoom.append(hidden[rel][i]);
44						
45						// Move any nested rels to the waiting room
46						hidden[rel][i].rels.each(function(){ intoWaitingRoom($(this)); });
47					}
48				}
49			};
50			
51			var intoMainForm = function(el){
52				var rel = el.attr('rel');
53				if (!rel || rel == 'none') return;
54				
55				if(hidden[rel]){
56					
57					for(var i=0; i< hidden[rel].length; i++){
58						
59						// Reinsert the element before the marker
60						$('#'+rel+''+i).before(hidden[rel][i]);
61						
62						// Re-attach event handlers
63						setHandlers(hidden[rel][i]);
64						
65						// Update the nested rels as well
66						hidden[rel][i].rels.each(function(){ update($(this)); });
67						
68						// Update any form inputs that were inserted by this action
69						hidden[rel][i].find('[name]').each(function(){ update($(this)); });
70						
71					}
72				}
73				
74				
75			};
76			
77			var update = function(tg){
78				var name = tg.attr('name');
79				
80				if(name){
81					$('input[name="'+name+'"]:not(:checked), select[name="'+name+'"] option:not(:selected)').each(function(){
82						intoWaitingRoom($(this));
83					});
84					$('input[name="'+name+'"]:checked, select[name="'+name+'"] option:selected').each(function(){
85						intoMainForm($(this));
86					});
87				}
88			};
89			
90			var setHandlers = function(el){
91				el.find('label').click(function(){ update( $('#' + $(this).attr('for')) ); });
92				el.find('input[type="radio"], input[type="checkbox"]').click(function(){ update( $(this) ); });
93				el.find('select').change(function(){ update( $(this) ); });
94			};
95			
96			(function(){
97				var markerTemplate = $('<'+containerTag+'></'+containerTag+'>', document)
98				markerTemplate.attr('style', 'display:none;');
99				
100				var hiddenFields = new Array();
101				var count = 0;
102				
103				if(ran[containerTag]){
104					return;
105				}
106				
107				ran[containerTag] = true;
108				
109				$(containerTag+'[rel][rel!=""]').each(function(){
110					var hiddenField = $(this);
111					
112					var rel = hiddenField.attr('rel');
113					
114					hiddenField.rels = hiddenField.find('input[rel][rel!=""][rel!="none"], option[rel][rel!=""][rel!="none"]');
115					
116					// Initialize hidden fields for this rel value if not set already
117					if (!hidden[rel]) hidden[rel] = new Array();
118					
119					// Append this container to the hidden fields
120					var index = hidden[rel].length;
121					hidden[rel][index] = hiddenField;
122					
123					// Replace the container with a marker so we'll know where to re-insert it
124					var marker = markerTemplate.clone();
125					marker.attr('id', '' + rel + index );
126					marker.addClass('test');
127					
128					hiddenField.replaceWith(marker);
129					count = count + 1;
130				});
131				
132				// Update the current form to show any selected fields
133				$(containerTag+'[rel!=""]').find('input[rel][rel!=""]').each(function(){ update( $(this) ); });
134				$(containerTag+'[rel!=""]').find('option[rel][rel!=""]').parent('select').each(function(){ update( $(this) ); });
135				
136				// Assign onclick and onchange events to labels, radio buttons, checkboxes, and select inputs
137				setHandlers($('body'));
138				
139			})();
140			
141		});
142		
143		
144		
145	};
146	
147})(jQuery);