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>
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.