Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
jQuery plugin for auto-filling and selecting values
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md
bower.json
examples.html
floodling.jquery.json
jquery.floodling.js
jquery.floodling.min.js

README.md

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

Something went wrong with that request. Please try again.