Find file
Fetching contributors…
Cannot retrieve contributors at this time
224 lines (175 sloc) 4.63 KB

jQuery floodling

jQuery plugin for auto-filling and selecting values of form elements.

Demo

In my sandbox

You can view a live demo here :)

jsFiddle

Or, you can play around with the code on jsFiddle

Usage

Referencing

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>

Setting the value of a single element

With scope selector

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');

Element selector

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');

Setting the values of multiple elements

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"
});

Setting multiple values of an element

This is applicable to multiple selects and checkbox groups.

Follow the same syntax as above but pass an array.

Setting the value of a single element - With scope selector

<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"]);

Setting the value of a single element - Element selector

<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"]);

Setting the values of multiple elements

<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"]
});

Works For

Floodling can populate the following form elements:

  • input
    • button
    • checkbox
    • color
    • date
    • datetime
    • datetime-local
    • email
    • 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)

License

MIT License

Contributors