Question

I have a series of forms in my html, the intention is that when the user clicks on the “continue” button, the current one disappears and the next one shows up. However I was wondering if there is a way of getting which “continue” button was pressed (that is, of which form) so to just have a piece of code that basically checks and hides the current form and shows up the next one without requiring id’s or such.

I tried a couple of things but none worked so I won’t be posting here the code (it honestly just “broke” the website anyways.

Answer 1

It’s quite a breeze if you use jQuery:

$(function() {
   // Attach click handler to your buttons
   $("button, input[type=submit]").click(function(e) {
      e.preventDefault();
      // Hide the correct form
      var thisForm = $(this).parents("form").hide();
      // Show the form after this one
      thisForm.nextAll("form:first").show();
   });
});

That’ll handle hiding and showing the forms for you too. It assumes your buttons are either <button> or <input type="submit">, and your form elements are within the same parent.

Of course, if you have buttons elsewhere on the page which don’t have this behaviour, then you need to add a class such as formContinue to your buttons of interest, and change the third line in the code above to:

$("button.formContinue, input[type=submit].formContinue").click(function(e) {