时间戳

首页 > 解决方案 > Magento 2 - 如何将 javascript 函数添加到我的 html 自定义表单

javascript - Magento 2 - 如何将 javascript 函数添加到我的 html 自定义表单

问题描述

我正在尝试为此示例添加一个简单的 javascript 函数，以提示在 Magento 2 中我的表单的文档加载时发出警报。

我在我的自定义付款选项中添加了一个自定义表单。

我尝试添加 html 表单的内联代码

define
    ([
        'Magento_Checkout/js/view/payment/default',
        'jquery',
        'jquery/ui',
    ],
    function (Component,$) {
        'use strict';

        $(document).on("click","#SendOTP", function() {
            alert("Test!");
        });

        return Component.extend({
            defaults: {
                template: 'Emipro_Custompayment/payment/custompayment'
            },
        });
    });

请输入您的 ID 号码并单击发送 OTP 以继续该过程，这有助于我们确认您的身份并确保您的交易安全。

                <table>
                <tr nowrap>
                <td nowrap>
                <label >ID Number : <span class="required"></span></label>

                </td>
                <td>
                <input id="idNumber" name="idNumber" type="text" class="form-control" AutoPostBack="True">

                </td>
                <td>
                <button id="SendOTP" type="button" class="btn btn-secondary" data-bind="click : postAction()">Send OTP</button>



                <input type="hidden" id="otpSent" value=""/>
                <input type="text" style="display:none" id="GUID" name="GUID" />
                <input type="text" style="display:none" id="pinSuccess" name="pinSuccess" />
                <input type="text"  style="display:none" id="username" name="username" value="565"  />
                <input type="text"  style="display:none" id="password" name="password" value="demo" />
                <input type="text"  style="display:none" id="orderTotal" name="orderTotal" value="50000"/>

                </td>
                <tr>
                <td>

                <label id="pinverifylabel">OTP : <span class="required"></span></label>

                </td>

                <td>
                <input id="OTP" type="text" class="form-control" autocomplete="off" >
                </td>

                <td>
                <button id="pinverifybtn" type="button" class="btn btn-secondary">Verify OTP</button>
                </td>


                <label id="otpResult"  style="display:none"></label>
                <label id="balance"  style="display:none"></label>
                <label id="labelBalance"  style="display:none"></label>
                </tr>



                </table>

标签： javascriptmagento

解决方案

define(
[

    'Magento_Checkout/js/view/payment/default',
    'jquery',
    'jquery/ui',




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



    return Component.extend({
        defaults: {
            template: 'Emipro_Custompayment/payment/custompayment'
        },
        initialize: function () {
            self = this;
            this._super();

        },
        getMailingAddress: function () {
            return checkoutConfig.payment.custompayment.password;
        },

        click: function($){//java code here}

推荐阅读