Add custom JS to an input on the Checkout input

MaximR · ‎01-21-2018

Hi, Im trying to find a way to add custom JS method on an input field at the checkout.

As we know, the function like document ready is not working on checkout page as we want, because all fields render with knockoutjs. Knockout has the method afteRender, but as I see Magento doesn't provide the method to each field. As i can suppose need to add by myself, but how to do this i can't find the correct way. There are solutions on the internet https://magento.stackexchange.com/questions/131496/magento-2-add-custom-binding-to-an-element-on-the... but how to add the custom event to the certain input, in my case 'Street Address ' for Magento 2.2

other solution https://magento.stackexchange.com/questions/159427/magento-2-run-execute-javascript-after-knockoutjs... it be applied to the checkout? and how can i reach this for the checkout

product_form.product_form.product-details.quantity_and_stock_status_qty.qty

i mean how get this element, it's not a class or tags name.

Damian Culotta · ‎01-23-2018

Hi @MaximR,

Can you check if this post helps you?

https://www.bitbull.it/en/custom-js-validation-magento2/

MaximR · ‎01-23-2018

hi @Damian Culotta,

thanks for the answer. its not exactly what i need.

with your provided solution it extends the validation js file, maybe it could help me, such kind of solution. I will check more detailed and let you know

MaximR · ‎01-28-2018

i checked the solution https://www.bitbull.it/en/custom-js-validation-magento2/ not for my case.

i tried to do this in another way

add custom JS to the item in Vendor/ModuleName/view/frontend/layout/checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="region" xsi:type="array">
                                                                <item name="component" xsi:type="string">Vendor_ModuleName/js/view/region</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

As the inputs on the Checkout rendered from the

vendor/magento/module-ui/view/frontend/web/templates/form/element/input.html

template, I created own template file based on the input.html, with one modification

Vendor/ModuleName/view/frontend/web/template/region.html with afteRender

<input class="input-text" afterRender="onElementRender" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        id: uid,
        disabled: disabled
    }" />

or

input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        id: uid,
        disabled: disabled,
        afterRender: onElementRender
    }" />

added js file Vendor/ModuleName/view/frontend/web/js/view/region.js

define([
    'jquery',
    'uiComponent',
    'ko'
], function ($, Component, ko) {
    'use strict';

    debugger;

    return Component.extend({        defaults: {
            template: 'Vendor_ModuleName/region'
        },        onElementRender: function () {
            debugger;
        }
    });
});

the first debugger works well and after that, i got an error

Uncaught ReferenceError: Unable to process binding "css: function (){return additionalClasses }"
Message: additionalClasses is not defined    at css (eval at createBindingsStringEvaluator (knockout.js:2624), <anonymous>:3:148)    at update (knockout.js:3803)    at ko.dependentObservable.disposeWhenNodeIsRemoved (knockout.js:3004)    at evaluateImmediate (knockout.js:1737)    at Object.ko.computed.ko.dependentObservable (knockout.js:1946)    at knockout.js:3002    at Object.arrayForEach (knockout.js:151)    at applyBindingsToNodeInternal (knockout.js:2974)    at applyBindingsToNodeAndDescendantsInternal (knockout.js:2854)    at Object.ko.applyBindings (knockout.js:3065)

pramod kumar_th · ‎06-24-2020

Hi Sir, could you please kindly help me understand this better as I am currently trying to achieve exactly what your post is explaining. Thanks, Pramod

@MaximR wrote:
Hi, Im trying to find a way to add custom JS method on an input field at the checkout.

As we know, the function like document ready is not working on checkout page as we want, because all fields render with knockoutjs. Knockout has the method afteRender, but as I see Magento doesn't provide the method to each field. As i can suppose need to add by myself, but how to do this i can't find the correct way. There are solutions on the internet https://magento.stackexchange.com/questions/131496/magento-2-add-custom-binding-to-an-element-on-the... but how to add the custom event to the certain input, in my case 'Street Address ' for Magento 2.2

other solution https://magento.stackexchange.com/questions/159427/magento-2-run-execute-javascript-after-knockoutjs... it be applied to the checkout? and how can i reach this for the checkout
product_form.product_form.product-details.quantity_and_stock_status_qty.qty 
i mean how get this element, it's not a class or tags name.

Kapil_Thakur · ‎10-20-2020

Magento uses`Magento_Ui/js/form/element/abstract.js` as default component for the input fileds. To create a custom component with some default functionality you need to use Abstract component as dependancy

define([
   'jquery',
   'Magento_Ui/js/form/element/abstract'
 ], function ($, Abstract) {
 'use strict';
 
  return Abstract.extend({ 
      initialize: function (){
        console.log(this);
        return this._super();
      },      

     /**
     * On value change handler.
     *
     * @param {String} value
     */
     onUpdate: function (value) {
        console.log("update");       
        return this._super();
     },
   });
});

Hope This will help and save time of others

Add custom JS to an input on the Checkout input

Add custom JS to an input on the Checkout input

Re: Add custom JS to an input on the Checkout input

Re: Add custom JS to an input on the Checkout input

Re: Add custom JS to an input on the Checkout input

Re: Add custom JS to an input on the Checkout input

Re: Add custom JS to an input on the Checkout input