1

The Problem

I want to submit an iron-form in Polymer 3. I use a paper-button and the form has to be submitted via iron-ajax.

This is my view.js

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';

class Foo extends PolymerElement {
    static get template() {
        return html'
            <iron-form>
                <form id="formOne" method="post" action="https://my-api-url.com" is="iron-form">
                    <paper-input name="input-1" placeholder="Input One"></paper-input>
                    <paper-button on-tap="submitHandler">Submit</paper-button>
                </form>
            </iron-form>
        ';
    }

    submitHandler() {
        this.$.formOne.generateRequest();
    }
}
window.customElements.define('foo', Foo);

My form is not submitted when clicking the paper-button.

What I tried

  • I created a iron-ajax element manually and did a request with generateRequest(). That worked.
  • I put an alert in the submitHandler function. It was shown.
  • I tried submitting the form with this.$.formOne.submit(). That worked, too. Of course the form wasn't submitted via ajax but the api page was opened.
  • I created a normal <button> to submit the form. This works and also sends the form via ajax, but I want to use the paper-button.

Any help is highly appreciated. Thanks!

Lukas
  • 13
  • 4
  • I think "submitHandler" Method should be outside of template() block. – Mitul Gedeeya Sep 23 '18 at 17:05
  • you also haven't imported "paper-button" – Mitul Gedeeya Sep 23 '18 at 17:07
  • @MitulGedeeya Why should the method be outside the template? The method is successfully called. I imported paper-button (and the other webcomponents) in my main view. – Lukas Sep 23 '18 at 19:11
  • I think Mitui is referring to the `submitHandler` inside `static get template()`, which is a syntax error. Most likely that's a copy-paste error. – tony19 Sep 23 '18 at 23:46
  • Ah I see. Yes, that's a copy-paste error. It's inside my class but not inside `static get template`. I edited my question for future visitors. – Lukas Sep 24 '18 at 10:39

1 Answers1

0

I tried submitting the form with this.$.formOne.submit(). That worked, too. Of course the form wasn't submitted via ajax but the api page was opened.

The issue is you're incorrectly calling <form>.submit() (executes the synchronous submit method of the native <form>) instead of <iron-form>.submit(). To resolve the issue, move the ID to the <iron-form>, which would execute the intended asynchronous submit method:

<iron-form id="formOne">
  <!-- <form id="formOne"> --> <!-- DON'T DO THIS -->
  <form>...</form>
</iron-form>

demo

tony19
  • 125,647
  • 18
  • 229
  • 307
  • Woah! That was it. Thanks. – Lukas Sep 24 '18 at 10:25
  • @Lukas No problem :) – tony19 Sep 24 '18 at 10:26
  • While we're at it.. Can you tell me how to use the response data in my html around the form? I tried `let response = this.$.formOne.submit();` but console says "undefined". – Lukas Sep 24 '18 at 10:29
  • The response is not synchronous, so you can't call a function get the response data. You'll have to add an event handler on `iron-form-response`. Feel free to ask a new question, as others may be able to provide a detailed answer that you might find more helpful. – tony19 Sep 24 '18 at 10:31