how to get custom field value to save order table in Checkout page in Magento 2

Question

I have extended checkout page with comment note for customer feedback. And the textbox also appearing in checkout page.

But I don't know how to get custom field value and save Could you please instruct me how to do it.

For this I have wrote below code.

app/design/frontend/Learning/Test/Magento_Checkout/web/template/billing-address.html

<div>
    <label><span data-bind="i18n: 'Comments'"></span></label>
    <textarea id="order_comment" rows="7" cols="15"/>
</div>
<br/>
<div class="billing-address-same-as-shipping-block field choice" data-bind="visible: canUseShippingAddress()">
    <input type="checkbox" name="billing-address-same-as-shipping" data-bind="checked: isAddressSameAsShipping, click: useShippingAddress, attr: {id: 'billing-address-same-as-shipping-' + $parent.getCode()}"/>
    <label data-bind="attr: {for: 'billing-address-same-as-shipping-' + $parent.getCode()}"><span data-bind="i18n: 'My billing and shipping address are the same'"></span></label>
</div>

<!-- ko template: 'Magento_Checkout/billing-address/details' --><!-- /ko -->
<fieldset class="fieldset" data-bind="visible: !isAddressDetailsVisible()">
    <!-- ko template: 'Magento_Checkout/billing-address/list' --><!-- /ko -->
    <!-- ko template: 'Magento_Checkout/billing-address/form' --><!-- /ko -->
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action action-update" type="button" data-bind="click: updateAddress">
                <span data-bind="i18n: 'Update'"></span>
            </button>
            <button class="action action-cancel" type="button" data-bind="click: cancelAddressEdit">
                <span data-bind="i18n: 'Cancel'"></span>
            </button>
        </div>
    </div>
</fieldset>

My textbox appearing in Checkout Page

Could you please instruct me how to get custom field and save.

Answer 1

There is already a pretty good tutorial about this, check out: http://oyenetwork.com/articles/magento2-devliery-date-module-creation-from-scratch/.

What he does:

• Create the field in both quote and sales_order table with InstallData.php
• Add extension attribute for shipping information
• Override Magento_Checkout/js/model/shipping-save-processor/default to get the attribute data with jQuery and add it to the shipping information.
• Add the attribute data the the quote
• Add the attribute data to the order
• Fetch the data in the admin panel and show on the order page

Answer 2

Finally I get the data by using below code

$request_body = file_get_contents('php://input');
$data = json_decode($request_body,true);
$po_number =$data['po_number']