twobirds-plugin-form

0.0.14 • Public • Published

twoBirds Plugin Form

Welcome Birdies ;-)

Disclaimer

Work in progress...

Intro

twobirds-plugin-form adds a transparent interface to every form.

It works like in this example:

 
<!DOCTYPE html>
<html>
    <head>
        <title>twoBirds Form Plugin</title>
        <link rel="stylesheet" type="text/css" href="jasmine/jasmine.css">
        <script type="text/javascript" src="js/tb/tb.js"></script>
        <script type="text/javascript" src="js/form.js"></script>
    </head>
    <body>
        <form name="existingForm">
            <!-- sample form to start with -->
            Text Input:<br>
            <input name="textInput" value="textInput text" />
            <br />
            Select:<br>
            <select name="singleSelect">
                <option disabled selected value> -- select -- </option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
            </select>
            <br />
            Multiselect:<br>
            <select name="multiSelect" multiple>
                <option value="1">Option 1</option>
                <option value="2" selected=true>Option 2</option>
                <option value="3">Option 3</option>
                <option value="4" selected=true>Option 4</option>
            </select>
            <br />
            <p>Radios:<br>
                <input type="radio" name="myRadio" value="radio1"> Radio 1 <br>
                <input type="radio" name="myRadio" value="radio2"> Radio 2 <br>
                <input type="radio" name="myRadio" value="radio3"> Radio 3 <br>
            </p>
            <p>Checkboxes:<br>
                <input type="checkbox" name="cb1"> Checkbox 1<br>
                <input type="checkbox" name="cb2"> Checkbox 2<br>
                <input type="checkbox" name="cb3"> Checkbox 3<br>
                <input type="checkbox" name="cb4"> Checkbox 4<br>
                <input type="checkbox" name="cb5"> Checkbox 5<br>
            </p>
 
        </form>
    </body>
</html>
 
 

Some JS code:

// examples from console:
> var f = tb.form()
undefined
> f.values.myRadio
undefined
> f.values.myRadio = "radio1"
"radio1"
> f.values
Object { textInput="textInput text",  myRadio="radio1",  cb1=false,  mehr...}
> f.values.multiSelect = [ '1', '2' ]
[ "1", "2" ]
> f.values.singleSelect = ''
""
> f.values.singleSelect = [ '3' ]
[ "3" ]
> f.values.singleSelect = '0'
"0"
> f.values.singleSelect = ''
""

As you see, it allows for transparent manipulation of form values.

There is no serialization / deserialization necessary. All you need to do is to set get values.

In case of questions contact me.

Readme

Keywords

none

Package Sidebar

Install

npm i twobirds-plugin-form

Weekly Downloads

1

Version

0.0.14

License

GPL-3.0+

Last publish

Collaborators

  • twobirds