How do I get form data from iron-form to be output in view

Question

I am new to Polymer 2 and ES6. I can console.log data that is input into the iron-form. However, I can't output it to the screen. I thought this line would achieve the goal:

this.querySelector('.output').innerHTML = JSON.stringify(this.$.pizzaOrder.favoritePizza);

However, that gives me the error: Uncaught TypeError: Cannot set property 'innerHTML' of null. Here is the full code of my custom element, my-form:

<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/iron-form/iron-form.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">

<dom-module id="my-form">
    <template>
        <iron-form id="pizzaOrder">
            <form action="/foo" method="get">
                Topping?
                <input type="text" id="favoritePizza" name="favoritePizza" value="favoritePizza" required></input>
                <br> Extra cheese?
                <input type="checkbox" id="cheese" name="cheese" value="cheese" checked></input>
                <br> Size?
                    <input type="radio" id="small" name="size" value="small"> Small </input>
                    <br>
                    <input type="radio" id="medium" name="size" value="medium"> Medium </input>
                    <br>
                    <input type="radio" id="large" name="size" value="large" checked> Large </input>
                <br>
                Delivery <paper-checkbox id="delivery" name="delivery" checked></paper-checkbox>
                <!--When you click, 'this.' is added to what you set equal to on-click-->
                <paper-button raised on-click="_submitForm">Submit</paper-button>
            </form>
        </iron-form>
        <h4>Your pizza is as follows:</h4>
        <div class="output"></div>
    </template>
    <script>
        /**
         * `sample-polymer`
         * sample
         *
         * @customElement
         * @polymer
         * @demo demo/index.html
         */
        class MyForm extends Polymer.Element {
            static get is() { return 'my-form'; }
            static get properties() {
                return {
                    favoritePizza: {
                        type: String,
                        notify: true
                    },
                    cheese: {
                        type: Boolean,
                        notify: true
                    },
                    size: {
                        type: String,
                        notify: true
                    },
                    delivery: {
                        type: Boolean,
                        notify: true
                    },
                    response: {
                        type: Object
                    },
                    pizzaOrder: {
                        type: Object
                    }
                };
            }
            _handleInput(event) {
            }
            _submitForm(event) {
                console.log("Form submitted");
                console.log(this.$.pizzaOrder.serializeForm());
                this.querySelector('.output').innerHTML = JSON.stringify(this.$.pizzaOrder.favoritePizza);
            }
        }
        window.customElements.define(MyForm.is, MyForm);
    </script>
</dom-module>`

score 0 · Accepted Answer · answered Feb 22 '18 at 22:20

0

Remove action="/foo" method="get" from your <form> tag. Then console.log(this.$.pizzaOrder.serializeForm()); prints your object (you don't need the second console). Use an <iron-ajax> element to submit the form.

See this pen: https://codepen.io/johnthad/pen/ddjPeZ?editors=1001

answered Feb 22 '18 at 22:20

Thad

898
13
24

I'm trying to output to the screen, though. I was already able to console.log the input. – Amanda Michel Feb 27 '18 at 21:22
Sorry, my bad. Instead of setting `innerHTML`, use Polymer data binding. Add a property for `favPizza` type object (and delete the others); change your `div` to `
[[favPizza.favoritePizza]]
`; then in the code `this.favPizza = this.$.pizzaOrder.serializeForm();` I've updated the pen: https://codepen.io/johnthad/pen/ddjPeZ?editors=1001 – Thad Feb 28 '18 at 00:28
Thank you, that really helps. I extended the output by doing this in the div: [[favPizza.favoritePizza]] [[favPizza.cheese]] [[favPizza.size]] [[favPizza.delivery]] All of the input properties display except for cheese (nothing displays). Any idea why? – Amanda Michel Mar 01 '18 at 16:23
No, unless you unchecked `cheese`. See https://codepen.io/johnthad/pen/mXoeMx?editors=1001 – Thad Mar 01 '18 at 19:06

How do I get form data from iron-form to be output in view

1 Answers1