<div id="wrapper"> <form id="form1" method="POST"> <input value="form 1" /> </form> <form id="form3" method="POST" style="display:none"> <input value="form 2" /> </form> <form id="form3" method="POST" style="display:none"> <input value="form 3" /> </form> <button class="btn btn-info" id="next">Next</button> </div>

How to switch to the next form when clicking the 'Next' button?

  • no, let's say the first will be visible, all of the following class = "hidden". I 'll redo it now :) - Niflungar

2 answers 2

The simplest option is to store the number ( index ) of the displayed form and when you click the button, show the following ( index + 1 ):

 $(function() { var $forms = $('#wrapper form'); var index = $forms.filter(':visible').index(); $('#next').on("click", function() { $forms.eq(index).hide(); index = (index + 1) % $forms.length; $forms.eq(index).show(); }); }); 
 <div id="wrapper"> <form id="form1" method="POST"> <input value="form 1" /> </form> <form id="form3" method="POST" style="display:none"> <input value="form 2" /> </form> <form id="form3" method="POST" style="display:none"> <input value="form 3" /> </form> <button class="btn btn-info" id="next">Next</button> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Plus or minus the same without using jQuery :

 document.addEventListener("DOMContentLoaded", function() { var $forms = document.querySelectorAll('#wrapper form'); var index = 0; for (var i = 0; i < $forms.length; i++) { var style = window.getComputedStyle($forms[i]); if (style.display != "none") { index = i; break; } } var $next = document.getElementById('next'); $next.addEventListener("click", function() { $forms[index].style.display = "none"; index = (index + 1) % $forms.length; $forms[index].style.display = "block"; }); }); 
 <div id="wrapper"> <form id="form1" method="POST" style="display:none"> <input value="form 1" /> </form> <form id="form3" method="POST"> <input value="form 2" /> </form> <form id="form3" method="POST" style="display:none"> <input value="form 3" /> </form> <button class="btn btn-info" id="next">Next</button> </div>

  • Thank! there will be a reputation of 15 - I will put up :) - Niflungar
  • one
    @Niflungar on health. 15 reputation to arrange is not difficult :) Added an example in response without using jQuery. It looks clumsy, but still there was no jquery tag in the question, and not everyone uses it for one reason or another. - Regent
  • here is 15 :)) deserved "up" - Niflungar

Another option with jQuery

 $('#next').click(function(){ $('#wrapper form:visible').hide().next().show(); })