Magento 2 Shipping Form at Checkout

Question

I have a custom shipping method and form that collects data on the shipping step. The data comes through fine, but when I go back and checkout again, the data still appears in the order and the order email even if I chose a different method. It is like the data is cached or stored somehow. I have tried to force nothing when it loads using:

$("#myform input[type='text']").val('');

But that doesn't do the trick. When it loads the data isn't in the fields, but the old data is still "stored" and shows up on the other order. It does seem that after 30 minutes or so the data is gone. I submit an order using a different method and it isn't there. But I am not totally sure that is always the case.

How can I make sure that data is gone after checkout is done?

Thanks!

UPDATE web/js/action - Mixin

    'jquery'
], function ($) {
    'use strict';

    return function (target) {
        return function (shippingMethod) {
            // call original method
            target(shippingMethod);

            if(shippingMethod && shippingMethod.carrier_code == 'carrier_code') {
                $("#opc-custom-checkout-form input[type='text']").val('');
                $('#opc-custom-checkout-form').show();
                $('#shipping-method-buttons-container').addClass('room-delivery-checkout');
            } else {
                $('#opc-custom-checkout-form').hide();
            }

Form JS

define([
    'knockout',
    'jquery',
    'mage/url',
    'Magento_Ui/js/form/form',
    'Magento_Customer/js/model/customer',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/url-builder',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/cart/cache',
    'Matt6_RoomDelivery/js/model/checkout/custom-checkout-form'
], function(ko, $, urlFormatter, Component, customer, quote, urlBuilder, errorProcessor, cartCache, formData) {
    'use strict';

    return Component.extend({
        customFields: ko.observable(null),
        formData: formData.customFieldsData,

        /**
         * Initialize component
         *
         * @returns {exports}
         */
        initialize: function () {
            var self = this;
            this._super();
            formData = this.source.get('customCheckoutForm');
            var formDataCached = cartCache.get('custom-form');
            if (formDataCached) {
                formData = this.source.set('customCheckoutForm', formDataCached);
            }

            this.customFields.subscribe(function(change){
                self.formData(change);
            });

            return this;
        },

        /**
         * Trigger save method if form is change
         */
        onFormChange: function () {
            this.saveCustomFields();
        },

        /**
         * Form submit handler
         */
        saveCustomFields: function() {
            this.source.set('params.invalid', false);
            this.source.trigger('customCheckoutForm.data.validate');

            if (!this.source.get('params.invalid')) {
                var formData = this.source.get('customCheckoutForm');
                var quoteId = quote.getQuoteId();
                var isCustomer = customer.isLoggedIn();
                var url;

                if (isCustomer) {
                    url = urlBuilder.createUrl('/carts/mine/set-order-custom-fields', {});
                } else {
                    url = urlBuilder.createUrl('/guest-carts/:cartId/set-order-custom-field', {cartId: quoteId});
                }

                var payload = {
                    cartId: quoteId,
                    customFields: formData
                };
                var result = true;
                $.ajax({
                    url: urlFormatter.build(url),
                    data: JSON.stringify(payload),
                    global: false,
                    contentType: 'application/json',
                    type: 'PUT',
                    async: true
                }).done(
                    function (response) {
                        cartCache.set('custom-form', formData);
                        result = true;
                    }
                ).fail(
                    function (response) {
                        result = false;
                        errorProcessor.process(response);
                    }
                );

                return result;
            }
        }
    });
});

Thanks!

Answer 1

Totally unknown but you can try the following simple way:

$("#myform input[type='text']").val('').change();