Question

Paypal提供了一个包含以下代码的按钮：

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="96FKD7W4CCMEE">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

我更愿意使用自己的按钮代替paypal＆＃34;立即购买＆＃34;按钮在这里提供。我想要的按钮的代码是：

<div style="background-color:#000000;color:#ffffff;" class="button"><p align="center" style="font-size:30px;">Purchase</p></div>

.button {
background-color:#64A9FD;
padding:20px;
width:200px;
cursor:pointer; 
opacity:0.8;
}

如何为自己的按钮替换paypal的按钮。

我尝试过的事情：

将我的按钮嵌入表单开始和结束标记之间 - paypal的按钮仍显示

删除标记 - 该按钮根本不起作用

删除＆＃34; src =＆＃34;＆＃34;＆＃34;在标签中 - 备用文本将我链接到目的地但单击按钮不是

Answer 1

Live Demo

为div提供一个ID，例如mySubmit，删除图片，因为它被命名为＆＃34;提交＆＃34;这将阻止通过脚本提交（除非你点击它）并执行

window.onload=function() {
  document.getElementById("mySubmit").onclick=function() {
    document.forms[0].submit();
  }
}

假设paypal表单是页面上的第一个

如果paypal INSISTS有一个名为submit的按钮，你可以尝试隐藏表单，将图像更改为提交按钮并使用

window.onload=function() {
  document.getElementById("mySubmit").onclick=function() {
    document.getElementsByName("submit")[0].click();
  }
}

其中[0]是页面上名为submit的第一个元素

Answer 2

您也可以通过jQuery执行此操作。使用此代码 -

jQuery(document).ready(function(){
   jQuery('input[type="image"][name="submit"][alt]').replaceWith('<input type="submit" name="submit" id="paypal-btn" value="Buy Now" alt="PayPal - The safer, easier way to pay online!">');
});

并在stylesheet.css中将这些css代码放入背景图像

#paypal-btn{background:url(images-path);
color:transparent;
}

注意：注释上面的css代码并添加为按钮提供的css代码。

PayPal按钮更换

2 个答案: