Input demo

Source code

			
			javascript
$(function(){
  $('#form1').formalist({
    selector: 'input[type="text"]',
    event: 'keyup',
    cascade: 'input[type="text"]:visible',
    correlate: function(box, field, type, value, name, id) {
      return type == 'text' && $(field).val() == value;
    }
  });
});
			
		

			
			css
form .hidden {display:none;}
form .visible {display:block;}
			
		

			
			html
<form id="form1">
  <div class="box">
    This is a #<input type="text" placeholder="Formalist" /> demo.<br />
    <small><em>Just type "Formalist" in the input field.</em></small>
  </div>
  <div class="box" data-show="Formalist" data-hide="*">
    You got it!
  </div>
</form>
			
		

Other demonstrations

• Basic demo - a simple demo with checkboxs
• Cascade demo - cascade demo that shows a multiple nested lists
• Input demo - custom options demo with an input field of type text
• Style demo - pretty css demo to make your form visually awesome

Github

This demo sample comes from a Github repository
https://github.com/xavierfoucrier/formalist

Made with love by xavierfoucrier