Trying to submit iron-form polymer 2 - Cannot read property 'submit' of null

Question

I'm not able to submit my iron-form. At this point I just need to see the content in the console, but when trying to submit the form i'm only getting error-msg: Uncaught TypeError: Cannot read property 'submit' of null. I've probably missed something obvious. I've been using the page: https://www.webcomponents.org/element/PolymerElements/iron-form

<iron-form id="sizeForm">
        <form method="post" action="">
            <paper-dropdown-menu label="Choose type" on-iron-select="_typeSelected">
                <paper-listbox slot="dropdown-content">
                    <paper-item value="Sneakers">Sneakers</paper-item>
                    <paper-item value="Shoes">Shoes</paper-item>
                    <paper-item value="T-shirts">T-shirts</paper-item>
                    <paper-item value="Jeans">Jeans</paper-item>
                </paper-listbox>
            </paper-dropdown-menu>
            <add-sneakers hidden$="{{hideSneakers}}"></add-sneakers>
            <paper-button onclick="{{_submitForm}}">Accept</paper-button>
            <div class="output"></div>
        </form>
    </iron-form>

<script>
    _submitForm() {
    document.getElementById('sizeForm').submit();
    }
</script>

Thad · Accepted Answer · 2018-03-10T14:12:45.033

0

Change

<paper-button onclick="{{_submitForm}}">Accept</paper-button>

to

<paper-button on-tap="_submitForm">Accept</paper-button>

or

<button onclick="_submitForm()">Accept</button>

Also, it seems the iron-form docs got it wrong: document.getElementById('sizeForm').submit() works with a button but not a paper-button. this.$.sizeForm.submit() works with either. (I'll explore this more, and may submit a pull request on it.)

See this pen for an example.

edited Mar 10 '18 at 14:12

answered Mar 10 '18 at 01:08

Thad

898
13
24

Unfortunately it doesn't works for me, "Uncaught ReferenceError: _submitForm is not defined" – R. Radio Mar 10 '18 at 08:55
Ah, you are dead right. Thanks, I should have tried that before commenting. I've written a pen for it (see above) and correct my answer. – Thad Mar 10 '18 at 14:14
@notwaldorf has explained what I (we?) were missing from the example. See https://github.com/PolymerElements/iron-form/pull/256 – Thad Mar 13 '18 at 01:08
This is great, thanks, to both of you! Now I just need to wrap my head around it. – R. Radio Mar 14 '18 at 17:37

score 0 · Answer 2 · answered Jul 12 '18 at 10:41

You need to give the id attribute to the form according to what you have on the javascript.

<form id="form_name" method="post" action="">

and correct it on the javascript, since the id that you are using on your example is (already) defined before.

document.getElementById('form_name').submit();

So, bottom line, you need to add the id in the form and correct it on the js code.

Trying to submit iron-form polymer 2 - Cannot read property 'submit' of null

2 Answers2