使用javascript <button>NEXT</button>将html元素完全更改为另一个<input type=“submit”>

Question

I have a multi part form in which: when the user fills each page and clicks on a next button given below. When on last page, the next button changes to a submit element but I am not able to submit data to database(MySQL XAMPP) I need input type="submit" instead of a button. I want to change all buttons to input type submit. My script is given below:

HTML for button

<div style="float:right;">
    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
    <button type="button" name="submit1" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>

Script

function showTab1(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 Form";
    } else {
        document.getElementById("nextBtn").innerHTML = "Next";
    }
}

Answer 1

Add an input element under your button style="display: none;" and give it an id="js-submit-form"

    <div style="float:right;">
        <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
        <button type="button" name="submit1" id="nextBtn" onclick="nextPrev(1)">Next</button>
        <input type="submit" id="js-submit-form" name="submit" value="Submit Form" style="display: none;">
    </div>

Then I set display:none for #nextBtn and display:block for #js-submit-form

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").style.display = "none";
  document.getElementById("js-submit-form").style.display = "inline";
} else {
  document.getElementById("nextBtn").style.display = "inline";
  document.getElementById("js-submit-form").style.display = "none";
  document.getElementById("nextBtn").innerHTML = "Next";
}

 // ... and run a function that displays the correct step indicator:
 fixStepIndicator(n)

}

Then Style the input as you wish. Hope that helped ;-)

Just for information this multi part form was created by w3schools

Answer 2

First change the button element to a input type button element:

<div style="float:right;">
    <input type="button" id="prevBtn" onclick="nextPrev(-1)" value="Previous" />
    <input type="button" name="submit1" id="nextBtn" onclick="nextPrev(1)" value="Next" />
</div>

Then in Javascript you can change the type of the submit button to submit :

function showTab1(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";
    }
    var nextBtn = document.getElementById("nextBtn");
    if (n == (x.length - 1)) {
        nextBtn.setAttribute('value', 'Submit Form');
        nextBtn.setAttribute('type', 'submit');
        nextBtn.removeAttribute('onclick');
    } else {
        nextBtn.setAttribute('value', 'Next');
        nextBtn.setAttribute('type', 'button');
    }
}

Be aware that you also have to remove or change the onclick attribute of the submit button.

Answer 3

I created what I think is a working snippet of your code…
I think the best approach is to use another element for the submit.
So, I added a hidden submit button, which shows when necessary.

Is that what you wanted to achieve?

See my comments in the code:

 // Added this vars here var tabs = document.getElementsByClassName("tab"); var prev = document.getElementById("prevBtn"); var next = document.getElementById("nextBtn"); var subm = document.getElementById("submBtn"); // New button var n = 0; function nextPrev(i) { // Renamed your function // Added: Hide all tabs for (var j = 0; j < tabs.length; j++) { tabs[n].style.display = "none"; } // This function will display the specified tab of the form... n = n + i; tabs[n].style.display = "block"; //... and fix the Previous/Next buttons: if (n == 0) { prev.style.display = "none"; } else { prev.style.display = "inline"; } if (n == (tabs.length - 1)) { next.style.display = "none"; subm.style.display = "inline"; } else { next.style.display = "inline"; subm.style.display = "none"; } } nextPrev(0); // Launch the function on load 

 .tab { display: none; } #submBtn { display: none; } 

 <form><!-- Added form --> <div style="float:right;"> <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button> <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button> <!-- Added this button --> <button type="submit" name="submit1" id="submBtn">Submit Form</button> </div> <!-- Added tabs --> <div class="tab">tab 0</div> <div class="tab">tab 1</div> <div class="tab">tab 2</div> <div class="tab">tab 3</div> </form> 

⋅ ⋅ ⋅

The disabled property

Instead of showing/hide elements, you could use the disabled property.
Here is the same code using it:

 // Added this vars here var tabs = document.getElementsByClassName("tab"); var prev = document.getElementById("prevBtn"); var next = document.getElementById("nextBtn"); var subm = document.getElementById("submBtn"); // New button var n = 0; function nextPrev(i) { // Renamed your function // Added: Hide all tabs for (var j = 0; j < tabs.length; j++) { tabs[n].style.display = "none"; } // This function will display the specified tab of the form... n = n + i; tabs[n].style.display = "block"; //... and fix the Previous/Next buttons: if (n == 0) { prev.disabled = true; } else { prev.disabled = false; } if (n == (tabs.length - 1)) { next.disabled = true; subm.disabled = false; } else { next.disabled = false; subm.disabled = true; } } nextPrev(0); // Launch the function on load 

 .tab { display: none; } 

 <form><!-- Added form --> <div style="float:right;"> <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button> <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button> <!-- Added this button --> <button type="submit" name="submit1" id="submBtn">Submit Form</button> </div> <!-- Added tabs --> <div class="tab">tab 0</div> <div class="tab">tab 1</div> <div class="tab">tab 2</div> <div class="tab">tab 3</div> </form> 

I hope it helps.

Answer 4

On last form you add a type attribute to button element. Like this

function showTab1(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").setAttribute("type", "submit");
        document.getElementById("nextBtn").innerHTML = "Submit Form";
    } else {
        document.getElementById("nextBtn").innerHTML = "Next";
    }
}