Radio & Checkbox Inputs #117

heme · 2013-10-21T19:05:58Z

Is there documentation on HTML form inputs somewhere? Specifically Checkboxes and Radio buttons. The code below is not working as expected for me. Thank you!

<html>
<head>
<meta charset="utf-8"/>
<title>Radio Button Tests</title>

    <script src="jquery.js"></script>
    <script src="transparency.js"></script>
    <script>
        var data = {
            radio: 'TWO',
            checkbox: ['THREE', 'FOUR'],
        };

        $(function () {
            $('#theForm').render(data);
        })
    </script>

</head>
<body>

<form id="theForm">
    <h3>Radio Buttons</h3>
    <input data-bind="radio" type="radio" name="radio" value="ONE" />ONE
    <br>
    <input data-bind="radio" type="radio" name="radio" value="TWO">TWO
    <br>
    <input data-bind="radio" type="radio" name="radio" value="THREE">THREE
    <br><br>

    <h3>Check Boxes</h3>
    <table cellpadding="10">
    <tbody><tr>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="ONE">ONE</td>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="TWO">TWO</td>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="THREE">THREE</td>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="FOUR">FOUR</td>
    </tr></tbody></table>

</form>

</body>
</html>

grimaldodev · 2013-10-25T20:48:06Z

Can you put the desired html please?

heme · 2013-10-28T16:17:44Z

I would expect output HTML below by default. Again, if anyone knows of docs, examples, or special directives I would appreciate it.

JavaScript:

        var data = {
            radio: 'TWO',
            checkbox: ['THREE', 'FOUR'],
        };

        $(function () {
            $('#theForm').render(data);
        })

Input:

<form id="theForm">
    <h3>Radio Buttons</h3>
    <input data-bind="radio" type="radio" name="rdo" value="ONE" />ONE
    <br>
    <input data-bind="radio" type="radio" name="rdo" value="TWO" />TWO
    <br>
    <input data-bind="radio" type="radio" name="rdo" value="THREE" />THREE
    <br><br>

    <h3>Check Boxes</h3>
    <table cellpadding="10">
    <tbody><tr>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="ONE" />ONE</td>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="TWO" />TWO</td>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="THREE" />THREE</td>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="FOUR" />FOUR</td>
    </tr></tbody></table>
</form>

Output:

<form id="theForm">
    <h3>Radio Buttons</h3>
    <input data-bind="radio" type="radio" name="radio" value="ONE" />ONE
    <br>
    <input data-bind="radio" type="radio" name="radio" value="TWO" checked="checked" />TWO
    <br>
    <input data-bind="radio" type="radio" name="radio" value="THREE" / >THREE
    <br><br>

    <h3>Check Boxes</h3>
    <table cellpadding="10">
    <tbody><tr>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="ONE" />ONE</td>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="TWO" />TWO</td>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="THREE" checked="checked" />THREE</td>
    <td><input data-bind="checkbox" type="checkbox" name="chkbox" value="FOUR" checked="checked" />FOUR</td>
    </tr></tbody></table>

</form>

Thanks for any help you can provide!

grimaldodev · 2013-10-28T17:47:41Z

you are trying to use the tag name as id to insert the text and paramaters, si not posible, look the next example:

javascript for the form

var inputs = {
    'label1' : 'this is a text',
    'label2' : 'other one',
    'checked1': 'checked'
}

var directives = {
  'checked1': {
     'checked': function(){
        return this.checked1;
      }
   }
}

$('form').render(inputs, directives)

html markup

<form>
    <input type="checkbox" id="checked1"><label for="checked1" id="label1"></label>
    <input type="checkbox" id="checked2"><label for="checked2" id="label2"></label>
</form>

html output

<form>
    <input type="checkbox" id="checked1" checked="checked"><label for="checked1" id="label1">this is a text</label>
    <input type="checkbox" id="checked2"><label for="checked2" id="label2">other one</label>
</form>

heme · 2013-10-28T19:32:37Z

Thanks @grimaldo! But...

I am trying to use the data-bind attribute set the checked status of radio/checkboxes.
I do not care about the label or its text.

I would expect the checkboxes, radio buttons to check themselves based on the data passed in. In my case the templates will have the labels hard coded in the HTML. I am not dynamically building the form, but I am dynamically "filling it in".

I have revamped my inputs/outputs:

JavaScript:

    <script>
        var data = {
            quantity: 3,
            colors: ['GREEN', 'YELLOW'],
        };
        $(function () {
            $('#theForm').render(data);
        })
    </script>

Input HTML

<form id="theForm">
    <h3>Quantity: Radio Buttons</h3>
    <input data-bind="quantity" type="radio" name="rdos" value="2" />2<br>
    <input data-bind="quantity" type="radio" name="rdos" value="3" />3<br>
    <input data-bind="quantity" type="radio" name="rdos" value="5" />5<br>
    <br>
    <h3>Colors: Check Boxes</h3>
    <input data-bind="colors" type="checkbox" name="chkbxs" value="RED" />RED<br>
    <input data-bind="colors" type="checkbox" name="chkbxs" value="GREEN" />GREEN<br>
    <input data-bind="colors" type="checkbox" name="chkbxs" value="BLUE" />BLUE<br>
    <input data-bind="colors" type="checkbox" name="chkbxs" value="YELLOW" />YELLOW<br>
    <br>
</form>

Expected Output HTML

<form id="theForm">
    <h3>Quantity: Radio Buttons</h3>
    <input data-bind="quantity" type="radio" name="rdos" value="2" />2<br>
    <input data-bind="quantity" type="radio" name="rdos" value="3" checked="checked" />3<br>
    <input data-bind="quantity" type="radio" name="rdos" value="5" />5<br>
    <br>
    <h3>Colors: Check Boxes</h3>
    <input data-bind="colors" type="checkbox" name="chkbxs" value="RED" />RED<br>
    <input data-bind="colors" type="checkbox" name="chkbxs" value="GREEN" checked="checked" />GREEN<br>
    <input data-bind="colors" type="checkbox" name="chkbxs" value="BLUE" />BLUE<br>
    <input data-bind="colors" type="checkbox" name="chkbxs" value="YELLOW" checked="checked" />YELLOW<br>
    <br>
</form>

cfaheyCurveJumper · 2015-06-01T18:38:14Z

Hi @heme ,

Did you ever find a solution for this? It works for me for checkboxes, but not for radios.

Thanks!

cfaheyCurveJumper · 2015-06-02T23:31:00Z

In case anyone else has this same struggle, adding a directive worked for me:

<script>
    var data = {
        quantity: 3,
        colors: ['GREEN', 'YELLOW'],
    };

    // THE DIRECTIVE
    var directive = {
        quantity: {
            checked: function() {

                // the element exists as the first argument
                var thisElem = arguments[0].element;

                // return true if the value of this element equals your quantity value
                return ( thisElem.value == this.quantity );
            }
        },
        colors: {
            checked: function() {

                var thisElem = arguments[0].element;

                // return true if the value of this element is in your array of colors
                return ( this.colors.indexOf( thisElem.value ) >= 0 );
            }
        }
    }

    $(function () {
        $('#theForm').render( data, directive ); // <=== USE THE DIRECTIVE
    })
</script>

heme · 2015-06-16T21:47:56Z

It has been a while since I first posted this, and I'm no longer actively using transparency, but....

I don't think I wanted to write a directive for every radio/checkbox group in my app. I was hoping this could get baked into the framework in some way. I do realize checkboxes are used as a single input and as a group; I'm sure that presents a challenge.

Good on ya for jumping in here. I really enjoyed working with this lib.

heme mentioned this issue Nov 3, 2015

Wrong behavior with checkboxes #146

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Radio & Checkbox Inputs #117

Radio & Checkbox Inputs #117

heme commented Oct 21, 2013

grimaldodev commented Oct 25, 2013

heme commented Oct 28, 2013

grimaldodev commented Oct 28, 2013

heme commented Oct 28, 2013

cfaheyCurveJumper commented Jun 1, 2015

cfaheyCurveJumper commented Jun 2, 2015

heme commented Jun 16, 2015

Radio & Checkbox Inputs #117

Radio & Checkbox Inputs #117

Comments

heme commented Oct 21, 2013

grimaldodev commented Oct 25, 2013

heme commented Oct 28, 2013

JavaScript:

Input:

Output:

grimaldodev commented Oct 28, 2013

heme commented Oct 28, 2013

JavaScript:

Input HTML

Expected Output HTML

cfaheyCurveJumper commented Jun 1, 2015

cfaheyCurveJumper commented Jun 2, 2015

heme commented Jun 16, 2015