Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <base href="https://polygit.org/shadydom+webcomponents+:master/shadycss+webcomponents+:master/custom-elements+webcomponents+:master/webcomponentsjs+:v1/polymer+:master/paper*+:2.0-preview/iron*+:2.0-preview/app*+PolymerElements+:2.0-preview/components/">
  <script src="webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-form/iron-form.html">
</head>
<body>
  <my-form></my-form>
<dom-module id="my-form">
  <template>
​
    <iron-form id="my-form">
      <form method="get">
        <input type="text" name="cenas">
        <button on-click="cenas">Submit</button>
      </form>
    </iron-form>
​
  </template>
​
  <script>
   
    class MyForm extends Polymer.Element {
​
      static get is() {
        return 'my-form';
      }
      
      connectedCallback() {
        super.connectedCallback();
        console.log("I only appear one time, connected callback");
        const form = this.$['my-form'];
        form.addEventListener('iron-form-presubmit', function (event) {
          event.preventDefault();
          console.log("I'm called two times");
          console.log(form.serializeForm());
        });
      }
​
      cenas() {
        console.log("I only appear one time, cenas()");
        //this.$['my-form'].submit();
      }
​
    }
​
    window.customElements.define(MyForm.is, MyForm);
   
  </script>
</dom-module>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers