0

Putting together a site that takes a logged in user through a registration process, creating a golf tournament. I am using the channel form tag. What the client was promised was that the sign up could happen across several pages:

P1: Register a new tournament and details P2: Enter in golf course information P3: Enter in fundraising organization information ...

and there are several other steps. The user is using the "next" feature to get to the next part of the sign up. I set up a channel called tournament and created a set of fields for the inputs. It occurred to me that this isn't going to work because it won't understand the "next button if the form tag has been closed. I am a rank amateur at AJAX but I was wondering if there is a way to use one template while the user is going through the steps of the registration and still have all the info submit to one entry...

            {exp:channel:form channel="tournament"}
            <ul>
                <li>
                    <label for="tour_title">Tournament Name</label>
                    <input class="medium" type="text" name="tour_title" id="tour_title" value="{tour_title}">
                </li>
                <li>
                    <label for="tour_body">Tournament Description</label>
                    <textarea name="tournament-description"></textarea>
                </li>
                <li>etc .....</li>
            </ul>
        {/exp:channel:form}

            <section class="page_nav">
                <a href="#" class="form-button">Next</a>
            </section>
            <section class="page_nav">
                <a href="#" class="form-button">Last</a>
            </section>

The process is by no means over when the user hits "next", there are a bunch of steps. If someone knows a better way I am wide open. Thanks.

1
0

The best way to do with would be with Freeform Pro, which allows you to collect form data across multiple pages easily. Unless you specifically need the resulting entries to be Channel entries (rather than Freeform entries), it might be your best bet.

However - the simplest way to do this with a Channel Form is to simply show/hide different sections of the form with javascript.

{exp:channel:form channel="tournament"}
<fieldset id="section_1">
    <legend>Tournament Details</legend>
    <ul>
        <li>
            <label for="tour_title">Tournament Name</label>
            <input class="medium" type="text" name="tour_title" id="tour_title" value="{tour_title}">
        </li>
        <li>
            <label for="tour_body">Tournament Description</label>
            <textarea name="tournament-description"></textarea>
        </li>
        <li>etc .....</li>
    </ul>
    <a href="#section_2" class="next-section">Next</a>
</fieldset>

<fieldset id="section_2">
    <legend>Personal Details</legend>
    <ul>
        <li>
            <label for="tour_name">Your Name</label>
            <input class="medium" type="text" name="tour_name" id="tour_name" value="{tour_name}">
        </li>
        <li>
            <label for="tour_email">Your Email Address</label>
            <input class="medium" type="text" name="tour_email" id="tour_email" value="{tour_email}">
        </li>
        <li>etc .....</li>
    </ul>
    <a href="#section_1" class="next-section">Next</a>
</fieldset>
{/exp:channel:form}

Then some jQuery like so (this is pretty generic, but to give the idea):

$(document).ready(function()
{
    $('fieldset').not(':first').hide();
    $('.next-section').on('click', function(e)
    {
        e.preventDefault();
        target = $(this).attr('href');
        $('fieldset').hide();
        $(target).fadeIn();
    });
});

This doesn't actually save an data between "pages" of course - it just breaks the form into multiple steps so it's easier to digest for the user.

11
  • I need this to be specific to a channel, that creates an entry. It isn't a "form" per say, it is actually creating a tournament entry that is searchable. Hope this is useful. – MelPax615 Nov 26 '14 at 15:24
  • sorry .... again, I need to know how to create multi-page forms using javascript to hide sections, as described here by Bjørn Børresen. He didn't expound or give any examples. expressionengine.stackexchange.com/questions/26413/ – MelPax615 Nov 26 '14 at 15:31
  • Indeed - this is exactly what my code above shows. – Derek Hogue Nov 26 '14 at 15:37
  • Sorry, running on 2 hours of sleep to get this resolved. My sincere apologies :-( I got it to work. Many thanks. To make both a back and next do I just add $('.back-section').on('click', function(e) to the script? – MelPax615 Nov 26 '14 at 15:47
  • No worries. You can actually go back with the exact same code - and you can use any class name you like, as so long as it's the same in the markup and jQuery. It just looks for an element with the ID linked in the anchor tag and shows it. – Derek Hogue Nov 26 '14 at 15:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.