Stepper Component - how to display the submit button on second steps.
I have three steps only, how can I move the submit button to the second step and the third step is similar to the last step?
Link.
Replies (6)
To move the submit button to the second step while keeping the third step similar to the last step, you can update your form or multi-step process logic. Here's a general approach:
HTML & JavaScript Solution:
If you're using HTML and JavaScript for your steps, you can modify the code like this:
Ensure Each Step is Divided: Use div containers for each step, hide and show these containers as the user progresses.
Move the Submit Button to the Second Step: Simply place the submit button (<button type="submit">Submit</button>) in the second step's container.
Ensure Third Step Resembles the Last Step: Modify the content of the third step as needed to resemble the last step, like confirming the inputs.
Example:
html
Copy code
<div >
<!-- Step 1 content here -->
<button onclick="nextStep(1)">Next</button>
</div>
<div >
<!-- Step 2 content here -->
<form >
<input type="text" name="input" required>
<button type="submit">Submit</button> <!-- Submit button on step 2 -->
</form>
<button onclick="nextStep(2)">Next</button> <!-- Move to Step 3 -->
</div>
<div >
<!-- Step 3 content here (similar to last step) -->
Review and Confirm
<p>Thank you for submitting!</p>
</div>
<script>
function nextStep(step) {
document.getElementById('step' + step).style.display = 'none';
document.getElementById('step' + (step + 1)).style.display = 'block';
}
</script>
Key Points:
Step 1: Basic inputs, click Next to go to Step 2.
Step 2: Contains the submit button; after submission, click Next to go to Step 3.
Step 3: Acts like a confirmation or summary of the process. Zorse Game
Hi,
The javascript of these examples you can check in the below file:
src/js/custom/utilities/modals/create-account.js.
The login to show the submit button on a particular step is done as shown below:
// Stepper change event
stepperObj.on("kt.stepper.changed", function(stepper) {
if (stepperObj.getCurrentStepIndex() === 4) {
formSubmitButton.classList.remove("d-none");
formSubmitButton.classList.add("d-inline-block");
formContinueButton.classList.add("d-none");
} else if (stepperObj.getCurrentStepIndex() === 5) {
formSubmitButton.classList.add("d-none");
formContinueButton.classList.add("d-none");
} else {
formSubmitButton.classList.remove("d-inline-block");
formSubmitButton.classList.remove("d-none");
formContinueButton.classList.remove("d-none");
}
});Regards.
