javascript - 我需要一个贝宝按钮来替换提交按钮。现在我两者都有,这很奇怪
问题描述
https://jsfiddle.net/Popo74123/q92jh1p0/474/
这是我的代码。现在贝宝按钮正在提交表单。它现在没有连接到贝宝。基本上我想要的是当他们到达表格的最后一步时,下一个按钮变成贝宝按钮。
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" class="form" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
js
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
这是我认为可以修复的另一个功能。
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
}
我不能只编辑 if 语句 where innerHTML = "submit"
to where submit 是 paypal 按钮吗?我不确定如何引用贝宝按钮。
解决方案
当一切准备就绪时,您可以添加一个 div 或 span 以包含下一个按钮,您可以像在此代码中一样替换此按钮。
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" class="form" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<div class="ToBeFilledWithPaypalBtnLater">
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
</div>
function finallyPaypalButton(){
var btn = '<button type="button" id="nextBtn" onclick="PayWithPaypal()">Next</button>'
document.getElementById("nextBtn").innerHTML = btn
/* better approach to create a span or div to include this button to replace
then replace the code below
*/
// document.getElementById("nextBtnSPAN").innerHTML = btn
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) {
finallyPaypalButton() ;
return false;
}
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
推荐阅读
- kubernetes - 为什么我的节点的“内部 IP 地址”设置为它们的外部 IP?
- java - android设备的图像捕获中不显示确定按钮
- python - 有没有办法在像消息框这样的弹出窗口中要求多项选择
- sql - 排除某些单词的触发器
- javascript - Cypress.io:如何从 cy.then 或 cy.each 函数中发送触发器?
- algorithm - 在 O(n) 时间内制作具有排序的 y 坐标的优先搜索树
- google-cloud-platform - 具有日期时间函数的数据存储区 GQL
- r - 将 facet_wrap 和 geom_segment 与自由 x 轴相结合?
- svg - SVG - 填充路径的孔(透明部分)
- python - 如何从 python 执行 bash 脚本(bash 文件包含用户输入)