我需要一个贝宝按钮来替换提交按钮。现在我两者都有，这很奇怪

Question

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)
}

我不能只编辑innerHTML = "submit" 的 if 语句，而不是 paypal 按钮吗？我不知道如何引用贝宝按钮。

Answer 1

当一切准备就绪后，您可以添加一个 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);
}