Blogger 上的按钮未触发

问题描述 投票:0回答:1

我得到了将表单重定向到 WhatsApp 的代码。我已经在 HTML 页面上对其进行了测试,并且运行良好,但是当我将其移至 Blogger HTML 模板编辑器时,无法触发该按钮并且没有任何反应。我还以为是博主上的jquery库没有安装,但是加了CDN链接,还是不行。还是我的代码中缺少某些东西,或者有什么问题?

   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <style>
        .panel{border:none;}
        
        .panel-heading
        {
            border:1px #212121 !important;          
            border-radius: 0px;
            background-color: #212121 !important; 
            color: #fff !important; 
            padding:20px 15px !important;
            font-size: 16px;
        }
        
        .btn-success {
            color: #fff;
            background-color: #5cb85c;
            border-color: #4cae4c;
            font-size: 14px;
            font-weight: 600;
            padding: 8px 14px;
        }
      </style>
    </head>
<body style='background-color:transparent;'>
        <div class="row">
            <div class="panel panel-success">
                <div class="panel-body">
                
                    <div class="col-md-6 form-group">
                        <input type="text" name="name" class="form-control" placeholder="Name* :" id="name">
                    </div>
                    
                    <div class="col-md-6 form-group">
                        <input type="text" name="company" class="form-control" placeholder="Company/Organization* :" id="company">
                    </div>
                    
                    <div class="col-md-12 form-group">
                        <textarea name="product_description" class="form-control" rows="3" id="product_description" placeholder="Message* :"></textarea>
                    </div>
                    
                    <div class='col-md-12'>
                        <div id="text-info"></div>
                        <div class="form-group">
                            <button align='center' class="btn btn-success sending">Send Message</button>
                        </div>
                    </div>
                    
                </div>
            </div>
    <script>
    $(document).on('click','.sending', function(){
        /* Inputan Formulir */
        var input_name                  = $("#name").val(),
            input_company               = $("#company").val(),
            input_email                 = $("#email").val(),
            input_phone                 = $("#phone").val(),
            input_product               = $("#product").val(),
            input_product_description   = $("#product_description").val();
     
        /* Pengaturan Whatsapp */
        var walink      = 'https://web.whatsapp.com/send',
            phone       = '6282200000000',
            text        = '/ Website Contact Form',
            text_yes    = 'Redirecting you to WhatsApp',
            text_no     = 'Please fill this form to start your booking.';
     
        /* Smartphone Support */
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            var walink = 'whatsapp://send';
        }
     
        if(input_name != "" && input_phone != "" && input_product != ""){
            /* Whatsapp URL */
            var checkout_whatsapp = walink + '?phone=' + phone + '&text=' + text + '%0A%0A' + 
                'Name: ' + input_name + '%0A' +
                'Perusahaan/Organisasi: ' + input_company + '%0A' +
                'Message: ' + input_product_description
                
            /* Whatsapp Window Open */
            window.open(checkout_whatsapp,'_blank');
            document.getElementById("text-info").innerHTML = '<div class="alert alert-success">'+text_yes+'</div>';
        } else {
            document.getElementById("text-info").innerHTML = '<div class="alert alert-danger">'+text_no+'</div>';
        }
    });
    </script>
</body>
html jquery blogger
1个回答
0
投票

可能博主在模板版中屏蔽了一些javascript功能,打开新窗口不是最好的方法,

尝试将链接放入带有

<a>
target="_blank"

标签中

参考:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes

const a = document.createElement("a");
a.setAttribute("target", "_blank");
a.setAttribute("href", "your whatsapp link");
a.click();

或者生成一个链接作为提交表单按钮,为此,每次用户更新表单数据时,您都必须更新链接的 href 属性(显示为提交按钮)

© www.soinside.com 2019 - 2024. All rights reserved.