Switch branches/tags
Find file
Fetching contributors…
Cannot retrieve contributors at this time
127 lines (116 sloc) 3.76 KB
<style>body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; } </style>
<h1>Floodling Examples</h1>
Get the source code on <a href="//">GitHub</a>!
<form id="myForm">
<input type="text" name="f1" id="myF1" />
<input type="password" name="f2" />
<h3>Text Area</h3>
<textarea name="f3"></textarea>
<h3>Single Select (Dropdown)</h3>
<select name="f4">
<h3>Multiple Select</h3>
<select name="f5[]" id="myMulti" multiple="multiple">
<option value="boo">boo</option>
<option value="foo">foo</option>
<option value="gloo">gloo</option>
<option value="doo">doo</option>
<h3>Radio Button Group</h3>
<input type="radio" name="f6" value="boo" /> boo<br />
<input type="radio" name="f6" value="foo" /> foo<br />
<input type="radio" name="f6" value="gloo" /> gloo<br />
<input type="radio" name="f6" value="doo" /> doo
<h3>Check Box</h3>
<input type="checkbox" name="f7a" value="boo" /> boo<br />
<input type="checkbox" name="f7b" value="foo" checked="checked" /> foo<br />
<input type="checkbox" name="f7c" value="gloo" /> gloo<br />
<input type="checkbox" name="f7d" value="doo" /> doo
<h3>Check Box Group</h3>
<p id="myCBG">
<input type="checkbox" name="f8[]" class="f8" value="boo" /> boo<br />
<input type="checkbox" name="f8[]" class="f8" value="foo" /> foo<br />
<input type="checkbox" name="f8[]" class="f8" value="gloo" /> gloo<br />
<input type="checkbox" name="f8[]" class="f8" value="doo" /> doo
<h3>Buttons - submit, reset, button</h3>
<input type="submit" name="f9" value="boo" />
<input type="reset" name="f10" value="boo" />
<input type="button" name="f11" value="boo" />
<h3>Image Button</h3>
<input type="image" name="f12" value="" />
<p>Check <a href="//">GitHub</a> for a complete list of supported form elements.</p>
<script src="//"></script>
<script src="jquery.floodling.min.js"></script>
$(function() {
// You can use a selector for the specific element
// Or, select a specific form and change the values of multiple elements using a JSON object
f2: "foo2",
f3: "foo3",
f4: "foo"
// Or, select a specific form and change the value of a specific element
$('#myForm').floodling('f6', 'gloo');
$('#myForm').floodling('f7b', 0);
$('#myForm').floodling('f7d', true);
$('#myForm').floodling('f9', 'doos');
$('#myForm').floodling('f10', 'door');
$('#myForm').floodling('f11', 'doob');
$('#myForm').floodling('f12', '');
// scope selector, JSON - selects boo, foo
'f5[]': ["boo","foo"]
// element selector, values only - deselects boo, selects gloo
// result: selected: foo, gloo
// scope selector, name and values - delesects foo, selects doo
$('#myForm').floodling('f5[]', ['foo','doo']);
// end result: selected: gloo, doo
// element selector, values only - selects gloo, doo
// result: selected: gloo, doo
// scope selector: name and values - selects boo; deselects doo
$('#myForm').floodling('f8[]', ['boo','doo']);
// result: boo, gloo
//scope selector: JSON - selects foo; deselects boo
'f8[]': ["boo", "foo"]
// result: foo, gloo