如何删除提交按钮并自动加载模型框

时间:2018-10-04 09:24:18

标签: javascript jquery

我只需要删除提交按钮,并打开没有提交按钮的模型框,我检查了代码,但是它有点小脚本,我很困惑。我可以使用onload事件吗?该脚本是印度支付网关服务(Razorpay)。我尝试修改它不起作用,我需要确切的方法。我是JS的新手。我不知道在哪里可以使用onload事件进行修改?

这是我的JS脚本:

jQuery(document).ready(function($){
    function showModal(response) {
        $('#response').html(response);
        $('html, body').css('overflow', 'hidden');
        $('.modal-container').show().prop('offsetHeight');
        $('.modal-container').addClass('shown');
    }
    function hideModal() {
        $('html, body').css('overflow', '');
        $('.modal-container').removeClass('shown');
        setTimeout(function() {
            $('.modal-container').hide();
        }, 300)
        document.getElementById("btn-razorpay").disabled = false;
    }
    $('.close').click(hideModal);
    // global method
    function createOrder(){
        $.ajax({
            url: "#redirectUrl#?action=create_order&page_id=#pageID#",
            type: 'GET',
            success: function(order) {   
                if (order.hasOwnProperty('error')){
                    showModal(order['error']);
                }
                else{
                    order.handler = function(payment){
                        $('#razorpay_payment_id').val(payment.razorpay_payment_id);
                        $('#razorpay_signature').val(payment.razorpay_signature);
                        var form_data = $('form').serializeArray();

                        $.ajax({
                            url: "#redirectUrl#", 
                            data: form_data,
                            type: 'POST',
                            success: function(response){
                                showModal(response);
                            }
                        });
                    };
                }
                // On dismissing the popup, enable the button again
                order.modal = {
                    ondismiss: function(){
                        document.getElementById("btn-razorpay").disabled = false;
                    }
                };
                // After order is created, open checkout
                openCheckout(order);
            }
        })
    }
    // global method
    function openCheckout(order) {
        var razorpayCheckout = new Razorpay(order);
        razorpayCheckout.open();
    }
    function disableRzpButton(){
        document.getElementById("btn-razorpay").disabled = true;
    }
    function addEvent(element, evnt, funct){
        if (element.attachEvent)
            return element.attachEvent('on' + evnt, funct);
        else
            return element.addEventListener(evnt, funct, false);
    }
    addEvent(document.getElementById("btn-razorpay"), 'click', createOrder);
    addEvent(document.getElementById("btn-razorpay"), 'click', disableRzpButton);
})

1 个答案:

答案 0 :(得分:1)

在提交按钮上,您需要添加一个事件单击器,它将调用showModal函数。

<div id="submit" onclick="showModal()">Submit</div>

也许是这样的。这是假设您的HTML代码中包含该脚本。