jQuery plugin for auto-filling and selecting values of form elements.
You can view a live demo here :)
Or, you can play around with the code on jsFiddle
Add it like any normal jQuery plugin.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.floodling.min.js"></script>
You can use a scope selector for your form or div. The first parameter is the name attribute of the form element and the second attribute is the value you want to set.
Syntax
$(__scope_selector__).floodling(__name__, __val__);
Example
<form id="myForm">
Foo <input type="text" name=""myTextbox" />
</form>
$('#myForm').floodling('myTextbox', 'bar');
You can also use the selector to choose the form element and pass the value as the first parameter.
Syntax
$(__element_selector__).floodling(__val__);
Example
Foo <input type="text" name="myTextbox" id="myText" />
$('#myText').floodling('bar');
You can set the values of multiple form elements by passing a JSON object.
Syntax
$(__scope_selector__).floodling(__json__);
Example
<form id="myForm">
Foo 1 <input type="text" name="f1" /><br />
Foo 2 <textarea name="f2"></textarea><br />
Foo 3<br />
<select name="f3">
<option>boo</option>
<option>foo</option>
<option>gloo</option>
<option>doo</option>
</select>
</form>
$('#myForm').floodling({
f1: "hello",
f2: "bar",
f3: "gloo"
});
This is applicable to multiple selects and checkbox groups.
Follow the same syntax as above but pass an array.
<form id="myForm">
Foo 1<br />
<select name="f1[]" id="myMulti" multiple="multiple">
<option value="boo">boo</option>
<option value="foo">foo</option>
<option value="gloo">gloo</option>
<option value="doo">doo</option>
</select><br />
Foo 2<br />
<input type="checkbox" name="f2[]" value="boo" /> boo<br />
<input type="checkbox" name="f2[]" value="foo" /> foo<br />
<input type="checkbox" name="f2[]" value="gloo" /> gloo<br />
<input type="checkbox" name="f2[]" value="doo" /> doo
</form>
$('#myForm').floodling('f1', ["boo", "gloo"]);
$('#myForm').floodling('f2', ["foo", "gloo"]);
<form id="myForm">
Foo 1<br />
<select name="f1[]" id="myMulti" multiple="multiple">
<option value="boo">boo</option>
<option value="foo">foo</option>
<option value="gloo">gloo</option>
<option value="doo">doo</option>
</select><br />
Foo 2<br />
<input type="checkbox" name="f2[]" class="f2" value="boo" /> boo<br />
<input type="checkbox" name="f2[]" class="f2" value="foo" /> foo<br />
<input type="checkbox" name="f2[]" class="f2" value="gloo" /> gloo<br />
<input type="checkbox" name="f2[]" class="f2" value="doo" /> doo
</form>
$('#myForm').floodling(["boo", "gloo"]);
$('.f2').floodling(["foo", "doo"]);
<form id="myForm">
Foo 1<br />
<select name="f1[]" id="myMulti" multiple="multiple">
<option value="boo">boo</option>
<option value="foo">foo</option>
<option value="gloo">gloo</option>
<option value="doo">doo</option>
</select><br />
Foo 2<br />
<input type="checkbox" name="f2[]" value="boo" /> boo<br />
<input type="checkbox" name="f2[]" value="foo" /> foo<br />
<input type="checkbox" name="f2[]" value="gloo" /> gloo<br />
<input type="checkbox" name="f2[]" value="doo" /> doo
</form>
$('#myForm').floodling({
f1: ["boo", "gloo"],
f2: ["foo", "gloo"]
});
Floodling can populate the following form elements:
- input
- button
- checkbox
- color
- date
- datetime
- datetime-local
- file
- hidden
- image
- month
- number
- password (not recommended, but hey, it works!)
- radio
- range
- reset
- search
- submit
- tel
- text
- time
- url
- week
- button
- button
- submit
- reset
- textarea
- select (single and multiple)