1

I have to call and pass value to the js function(showPopup())from the template(when clicking the Verify OTP button). How to achieve this?. But now i am not able to call the js function.

layout file

<item name="telephone" xsi:type="array">                                                                                                                          
    <item name="config" xsi:type="array">
    <item name="elementTmpl" xsi:type="string">Vendor_module/form/element/phone.html</item>
        <item name="tooltip" xsi:type="array">
            <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
        </item>
    </item>
</item>

Vendor_module/view/frontend/web/js/view/form/element/phone.js

define([
    'Magento_Ui/js/form/form'
], function(Component) {
    'use strict';
    return Component.extend({
        defaults: {
            template: 'Vendor_module/form/element/phone',
        },
        initialize: function () {
            this._super();
            // component initialization logic
            return this;
        },

        /**
         * Form submit handler
         *
         * This method can have any name.
         */
        showPopup: function(){
          i need to get my phone number
        }

    });
});

Vendor_module/view/frontend/web/template/form/element/phone.html

 <!-- input field element and corresponding bindings -->
    <input class="input-text" type="number" data-bind="
        value: value,
        valueUpdate: 'keyup',
        hasFocus: focused,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled
        }" />
    <!-- additional content -->
    <div class="primary">
        <button class="action primary" data-bind="click:showPopup">
            <span>Verify OTP</span>
        </button>
    </div>
1

You can put your js function direclty in html like this :

<div class="primary" 
     data-bind="afterRender: function(){
         jQuery('button#phone').click(function() {
             alert('it works');
         });
     }">
    <button id="phone" class="action primary"><span>Verify OTP</span></button>
</div>

If you also want to get some value from outside, you can take a look at this.

| improve this answer | |
1

Try

<button class="action primary" data-bind="click: showPopup.bind($data)">
       <span>Verify OTP</span>
</button>

Inside your method showPopup js code

showPopup: function(){
   var _self = this;
   console.log(_self.value());
}
| improve this answer | |
0

The js file need to be defined in the layout.

 <item name="component" xsi:type="string">Vendor_module/js/view/form/element/phone</item>

I added the above code the layout file.

<item name="telephone" xsi:type="array">
    <item name="component" xsi:type="string">Vendor_module/js/view/form/element/phone</item>                                                                                    <item name="config" xsi:type="array">
            <item name="elementTmpl" xsi:type="string">Vendor_module/form/element/phone.html</item>
            <item name="tooltip" xsi:type="array">
                <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
            </item>
        </item>
    </item>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.