I can't do work Iron-Form with Polymer Starter-Kit

[Naehs]

I folks, i'm new with Polymer and the Starter-Kit is perfect for the Application that i want to realise. But when i want to add an Iron-Form (the Iron-Form-Presubmit demo) it says in the browser console :

Uncaught ReferenceError: presubmit is not defined

For example i create a new project :

• mkdir my-app
• cd my-app
• polymer init starter-kit

I add the components :

• bower install --save PolymerElements/paper-elements
• bower install --save PolymerElements/iron-elements

Then i just change the second view "src/my-view2.html" :

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view2">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
      }
    </style>

    <div class="card">
      <div class="circle">2</div>
      <h1>View Two</h1>
      <p>Ea duis bonorum nec, falli paulo aliquid ei eum.</p>
      <p>Id nam odio natum malorum, tibique copiosae expetenda mel ea.Detracto suavitate repudiandae no eum. Id adhuc minim soluta nam.Id nam odio natum malorum, tibique copiosae expetenda mel ea.</p>
    </div>
  </template>

  <script>
    Polymer({
      is: 'my-view2'
    });
  </script>
</dom-module>

To :

<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../bower_components/iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../bower_components/paper-styles/color.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view2">
  <template>
    <form is="iron-form" method="get" action="/" id="presubmit">
      <paper-input name="name" label="Name" value="Batman" required></paper-input>
      <paper-button raised onclick="_submit(event)">Submit</paper-button>
      <paper-button raised onclick="_reset(event)">Reset</paper-button>
      <div class="output"></div>
    </form>
    <script>
      function _submit(event) {
        Polymer.dom(event).localTarget.parentElement.submit();
      }
      function _reset(event) {
        var form = Polymer.dom(event).localTarget.parentElement
        form.reset();
        form.querySelector('.output').innerHTML = '';
      }
      presubmit.addEventListener('iron-form-presubmit', function(event) {
        this.request.params['sidekick'] = 'Robin';
      });
      presubmit.addEventListener('iron-form-submit', function(event) {
        this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
      });
    </script>
  </template>

  <script>
    Polymer({
      is: 'my-view2'
    });
  </script>
</dom-module>

Then i run the server :

• polymer serve --open

And i get the following error :

Uncaught ReferenceError: presubmit is not defined

I think the error is related to JQuery but i'm not sure and i don't know how to resolve it, i'm on it since some days...

I need your help !

Greetings Loïc.

[eitch]

I have seen the same issue. I solved it by using the iron-form only for the layout and validation, then I use a a11n-keys to catch the enter button and the submit to define my own on-tap handler then send the form using iron-ajax. I find it rather cumbersome, but it works.

[Naehs]

Hi Eitch,

Oeffff, yes it seems to be a bit hard for a Framework supposed to be simple on use. But thanks for sharing, i hope there is a simpler solution.

Loïc.

[eitch]

Absolutely! I just needed a solution now and was too lazy to file an issue =)). Hope the team can point us in the right direction...

[jsilvermist]

If you declare your methods in a script alone like that, it is a global script with no link to the element, you want to declare the methods in the Polymer() call for proper scoping.

This worked with no errors for me: (EDIT: Made it a bit more readable.)

<!-- You don't need to load webcomponents.js here, it's loaded in the index.html if needed -->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view2">
  <template>
    <!-- Style includes shared-styles which are defined in src/shared-styles.html, eg .card -->
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }

      .output {
        display: inline-block;
        margin: 5px;
      }
    </style>

    <!-- .card class is similar to paper-material, the white background with shadow -->
    <div class="card">
      <form is="iron-form" method="get" action="/" id="presubmit">
        <paper-input name="name" label="Name" value="Batman" required></paper-input>

        <!-- on-tap adds an event for methods defined within the element.
        Use function name eg. _submit, NOT _submit() -->
        <paper-button raised on-tap="_submit">Submit</paper-button>
        <paper-button raised on-tap="_reset">Reset</paper-button>
        <div class="output"></div>
      </form>
    </div>
  </template>

  <script>
    Polymer({
      is: 'my-view2',

      // ready() is called when element is ready at load time.
      ready() {
        // this.$.elementID allows easy selection of elements within own element.
        this.$.presubmit.addEventListener('iron-form-presubmit', function(event) {
          this.request.params['sidekick'] = 'Robin';
        });

        this.$.presubmit.addEventListener('iron-form-submit', function(event) {
          // Changed from this.QS to Polymer.dom(this.root).QS to prevent potential conflicts later,
          // as this only selects an element from my-view2.
          Polymer.dom(this.root).querySelector('.output').innerHTML = JSON.stringify(event.detail);
        });
      },

      _submit(event) {
        Polymer.dom(event).localTarget.parentElement.submit();
      },

      _reset(event) {
        var form = Polymer.dom(event).localTarget.parentElement
        form.reset();
        form.querySelector('.output').innerHTML = '';
      }
    });
  </script>
</dom-module>

[Naehs]

Hi Jsilvermist,

Well it's working for me too now :) So i suppose for all the examples on the demo i have to change the "onclick" by "on-tap" and put the script inside the Polymer call.

Thank you for taking the time to help me.

Loïc.

[jsilvermist]

No problem, edited the answer with comments explaining all the things I changed and why.

Also, you reopened this issue, not sure if this was on purpose or not so just wanted to let you know!

[Naehs]

Thanks again, It's the first time i close an issue on Github.

So i discovered that "Close issue" close directly the issue but i was waiting a last answer that i just had so i reopened it !

Now i can close it.

Loïc.

[notwaldorf]

Yay, glad you sorted this out :)