ansaurus

Question

find out which form does the clicked item belongs from

Answer 1

+1 A:

Simplest might be to give each such "continue button" a different id, which makes it trivial to identify (e.g. you could have the id be the form's id concatenated with the string '_cnt' or the like). But if you're using jquery, the .parent() method lets you trivially-easily find an object's "parent", so in that case I'd recommend just making the continue buttons immediate children of their respective forms. (If you're not using some good JS framework, like the popular jquery, to tide you across browser incompatibilities &c, consider doing so... they're really useful!-).

Alex Martelli 2010-08-09 00:54:18

Answer 2

A:

For every input element you can obtain the parent form by element.form. From inside every element you can locate the next sibling by element.nextSibling.

Here's the math:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3436720</title>
        <script>
            function showNext(form) {
                var next = nextSibling(form, 'FORM');
                form.style.display = 'none';
                if (next) next.style.display = 'block';
            }
            function nextSibling(element, tagname) {
                var next = element.nextSibling;
                while (next && next.tagName != tagname) next = next.nextSibling;
                return next;
            }
        </script>
        <style>
            .hide { display: none; }
        </style>
    </head>
    <body>
        <form>Form 1<button onclick="showNext(this.form)">next</button></form>
        <form class="hide">Form 2<button onclick="showNext(this.form)">next</button></form>
        <form class="hide">Form 3<button onclick="showNext(this.form)">next</button></form>
        <form class="hide">Form 4<input type="submit"></form>
    </body>
</html>

You may be just starting with JavaScript. But I'd recommend to end up using a JavaScript library which insanely eases DOM manipulation, like jQuery. Here's how it can look like with help of it:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3436720 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
        <script>
            $(document).ready(function() {
                $('button.next').click(function() {
                    $(this).closest('form').hide().next('form').show();
                });
            });
        </script>
        <style>
            .hide { display: none; }
        </style>
    </head>
    <body>
        <form>Form 1<button class="next">next</button></form>
        <form class="hide">Form 2<button class="next">next</button></form>
        <form class="hide">Form 3<button class="next">next</button></form>
        <form class="hide">Form 4<input type="submit"></form>
    </body>
</html>

BalusC 2010-08-09 01:12:58

Answer 3

A:

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

box9 2010-08-09 02:48:33

quick question, if "form:first" gets me the next sibling, how can I get ahold of the previous one?

Luis Armando 2010-08-09 04:12:46

sorry, my mistake, siblings("form:first") will get you the first form in the series. To get the previous or next form use thisForm.prev() and thisForm.next(). If you have other elements between forms then use thisForm.prevAll("form:first") and thisForm.nextAll("form:first"). I've updated my answer to show this.

box9 2010-08-09 04:30:53

ansaurus

tags:

views:

answers:

find out which form does the clicked item belongs from

related questions