Heidi -- makes forms more interactive
data-attributes in HTML.
See the demo on www.woerter.de/projects/heidi/demo.html and check out its source code which is part of this repository.
- Embed jQuery (tested with v2, will possibly work with v1).
- Embed heidi.js. You can do that in the head or anywhere in the body, as you prefer.
- Embed heidi.css which contains a few necessary CSS classes.
Your header might look like this:
- Set a
data-selectattribute in a form element. Its value has to be a CSS selector as you use them in jQuery, e.g.
- All elements which fit to this selector will be hidden
onLoadand show up when you enter content, select or check the form element – depending on the type of the form element.
- Heidi works with
- Heidi is tested on all modern browsers and Internet Explorer back to version 9. It possibly will work on even older IEs, but go check yourself if you have to.
- There is basic support for
<textarea>but browsers don't handle
onChangeevents on these elements very well. Heidi does not yet make use of
Some Advanced Tips:
- If you hide other form elements you can decide if you want their contents deleted if they are hidden (default: no). Set the property
deleteHiddenFieldsin the beginning of the script accordingly.
- You can use complex selectors.
<input type="checkbox" data-select=".class, #id"/>will turn on
<x id="id">and all
- Negative selectors are possible!
<input type="checkbox" data-select="!.class"/>will turn off all
- If you need more than one condition to be met for an element to show, use different selectors, e.g.
- Buttons are different from input and select fields. They are meant to be used as a row of switches turning alternate sections of content on (see demo below). They require a
data-valueattribute in their root element that states which section is on per default. They can't have multiple selectors.