Search code examples
polymerpolymer-1.0paper-elements

Polymer 1.x: <paper-toggle-botton> VALUE doesn't toggle off

I can't get the value of the <paper-toggle-button> element to toggle to the "off" value using <iron-form>.serialize(). Although the visual rendering does appear to toggle to the "off" position.

What am I doing wrong?

Here is a link to the JSBin demo.

  1. Click the toggle button in the demo to see their values.
  2. Each button begins with its value set to "off."
  3. The first click on each button sets the value to "on."
  4. At no time does the value ever toggle back to "off" after it toggles "on."
  5. The visual rendering of each toggle button appears to work as expected.
http://jsbin.com/ruzuwaqiyi/edit?html,output 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-toggle-button {
        display: block;
        margin-bottom: 40px;
      }
    </style>
    <form is="iron-form" id="form">
      <p>Click each button to view the values.</p>
      <paper-toggle-button name="foo" on-change="handle">foo</paper-toggle-button>
      <paper-toggle-button name="bar" on-change="handle">bar</paper-toggle-button>
      <paper-toggle-button name="baz" on-change="handle">baz</paper-toggle-button>
      <paper-toggle-button name="bat" on-change="handle">bat</paper-toggle-button>
      <p>See how the values never toggle back to "off?"
    </form>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element',
        handle: function() {
          alert(JSON.stringify(this.$.form.serialize()));
        }
      });
    })();
  </script>
</dom-module>
</body>
</html>
Solution

  • I think I'll just use the <paper-checkbox> element instead. JSBin

    http://jsbin.com/dewixacagu/edit?html,output 
    <!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-checkbox {
        display: block;
        margin-bottom: 40px;
      }
    </style>
    <form is="iron-form" id="form">
      <p>Click each button to view the values.</p>
      <paper-checkbox name="foo" on-change="handle">foo</paper-checkbox>
      <paper-checkbox name="bar" on-change="handle">bar</paper-checkbox>
      <paper-checkbox name="baz" on-change="handle">baz</paper-checkbox>
      <paper-checkbox name="qux" on-change="handle">qux</paper-checkbox>
      <p>See how the values toggle back to "off" now?</p>
    </form>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element',
        handle: function() {
          alert(JSON.stringify(this.$.form.serialize()));
        }
      });
    })();
  </script>
</dom-module>
</body>
</html>