I am needing a paypal button to replace a submit button. Right now i have both and it is weird

Question

https://jsfiddle.net/Popo74123/q92jh1p0/474/

This is my code that i have. Right now the paypal button is submitting the form. Its not connected to paypal as of right now. basically what I want is when they get to the last step of the form, the next button turns into the paypal button.

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

Here is another function that I believe is where I can fix it.

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

Couldn't I just edit the if statement where innerHTML = "submit" to where submit is instead the paypal button? im not sure how to reference the paypal button to this though.

Answer 1

You may add a div or span to include next button when everything is ready you can replace this button as in this code.

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