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

Answer 1

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