贝宝按钮更换答案

【问题标题】：PayPal Button Replacement贝宝按钮更换
【发布时间】：2014-08-30 23:27:05
【问题描述】：

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!">

我更喜欢使用我自己的按钮，而不是此处提供的贝宝“立即购买”按钮。我想要的按钮代码是：

<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 的按钮

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

删除标签中的“src=""" - 替代文本将我链接到目的地，但点击按钮没有

【问题讨论】：

标签： html forms button paypal hyperlink

【解决方案1】：

Live Demo

给 div 一个 ID，例如 mySubmit，删除图像，因为它被命名为“submit”，它将阻止通过脚本提交（除非你点击它）然后执行

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

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

如果贝宝坚持有一个名为提交的按钮，您可以尝试隐藏表单，将图像更改为提交按钮并使用

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

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

【讨论】：

paypal 表单位于正文内的 html 文档中。查看您的代码，有一个 [0] 数组是否意味着出现的第一个表单？如果我有多个 paypal 按钮（即页面上的多个表单），我会为每个 div 提供不同的 id 并将 forms[0] 更改为 forms[1] 等...吗？
所以如果我有三种不同的表单（按照它们在 html 中列出的顺序），如果我给表单 3 的 div 按钮一个 mySubmit3 document.getElementById("mySubmit3") 的 id。 onclick=function() { document.forms[3].submit();会工作吗？
它似乎不起作用，它只是在我的网址中添加了“?search=&bgresponse=”并将我带到了页面顶部
如果您有 3 个表单，则 forms[0].submit 将提交第一个，forms[2] 第三个。我的代码应该可以工作，除非贝宝想要为已删除的图像提交 =...。提交已发布的表单将不会加载您的页面，并在 url 中添加了一些内容。当表单以 _top 为目标时，肯定不会。我要睡觉了
我应该把javascript放在哪里，因为我试着把它放在头部和身体里，但我仍然得到错误

【解决方案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 代码。

【讨论】：

永远不要在表单中调用任何 name="submit" 并且您不会在这里用形状像按钮的 div 替换图像