Custom Checkout Step Fields not in Post Data

Question

I have created a new checkout step with 4 form fields. The step is called additional-order-info.

I created the step and the form with the help of the devdocs for Magento 2(.1).

I have also created table columns in the quote and sales_order tables to save the data into.

Everything seems to be working with the step (validation, etc) apart from the fact that the form fields are not in the post data for the checkout.

This is what I see when I click 'Place Order':

My section is not there. I have expanded the billingAddress and paymentMethod objects but my fields are not there.

Here is my component's JS file if needed:

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator',
        'jquery',
        'mage/validation'
    ],
    function (ko,
              Component,
              _,
              stepNavigator,
              $
    ) {
        'use strict';
        /**
         *
         * mystep - is the name of the component's .html template,
         * <Vendor>_<Module>  - is the name of the your module directory.
         *
         */
        return Component.extend({
            defaults: {
                template: 'Wildcard_CheckThisOut/additional-order-info'
            },

            //add here your logic to display step,
            isVisible: ko.observable(false),

            /**
             *
             * @returns {*}
             */
            initialize: function () {
                this._super();

                // register your step
                stepNavigator.registerStep(
                    //step code will be used as step content id in the component template
                    'additional_order_info',
                    //step alias
                    null,
                    //step title value
                    'Additional Information',
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                     * sort order value
                     * 'sort order value' < 10: step displays before shipping step;
                     * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                     * 'sort order value' > 20 : step displays after payment step
                     */
                    15
                );

                return this;
            },

            onSubmit: function () {
                // trigger form validation
                this.source.set('params.invalid', false);
                this.source.trigger('additionalOrderInfoForm.data.validate');

                if (!this.source.get('params.invalid')) {
                    // data is retrieved from data provider by value of the customScope property
                    var formData = this.source.get('additionalOrderInfoForm');
                    // do something with form data

                    this.navigateToNextStep();
                } else {
                    return false;
                }
            },

            validateForm: function (form) {
                return $(form).validation();
            },

            /**
             * The navigate() method is responsible for navigation between checkout step
             * during checkout. You can add custom logic, for example some conditions
             * for switching to your custom step
             */
            navigate: function () {
                var self = this;
                self.isVisible(true);
            },

            /**
             * @returns void
             */
            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    }
);

What my end-goal is for this is to save the contents of the fields in the database against the order. There are a lot of similar questions out there but they all refer to extending the shipping/payment sections, not using a custom section.

My idea was to write a plugin or observer to listen for the saving of the order but if my data is not being sent with the checkout, this won't be possible.

Another idea of mine was to add and Ajax call in the JS above and use a controller to set the data in the DB.

Can someone please let me know what I have to do to achieve this. And whether I am on the right track. I am on a pretty tight deadline with this project so really need to get this working ASAP. Thanks in advance.

Using Magento version 2.1.5

Answer 1

You have to use event observer method approach to save data before placed order.

As you said you have already made sales_order table field for custom form.

Just use sales_model_service_quote_submit_before to save data inside table.

Inside observer you can get post data of your custom form and save inside table.