Jump to:

2002 Posts in 1422 Topics by 616 members

Form Questions

SilverStripe Forums » Form Questions » spread formfields throughout the page

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 708 Views
  • theoldlr
    Avatar
    Community Member
    103 Posts

    spread formfields throughout the page Link to this post

    I've made custom forms in SS before, but the fields have always been grouped together and put into the template all in the same spot with $Form.

    I'm making a short quiz that fits into a relatively small space on the page, so unlike a normal form I can't just stick $Form in the template (I think). I was planning on something basically like this:

    <div class="container">
    <div class="questionslider">
    <div class="question1">
    [question 1 form field here]
    </div>
    <div class="question2">
    [question 2 form field here]
    </div>
    </div>
    </div>

    the questionslider div will be as wide as the sum of widths of the question# divs and there will be controls to move back and forth through the questions (javascript)with the submit button on the last one.

    How should I approach this? Hard code the template (feels wrong, but may be right?) Use the multiform module (feels like overkill since the quiz is only on 1 page)?

    Advice appreciated! Thanks!

  • Willr
    Avatar
    Forum Moderator
    5489 Posts

    Re: spread formfields throughout the page Link to this post

    You can make a custom template for a form and implement a setup like that quite easily - http://doc.silverstripe.org/sapphire/en/topics/forms#using-a-custom-template

  • theoldlr
    Avatar
    Community Member
    103 Posts

    Re: spread formfields throughout the page Link to this post

    Thanks Willr, that was definitely what I was looking for... quick template question to go along with it though...

    <% control Fields %>
    <div class="slide question{$iteratorPos}">
    <div id="question{$iteratorPos}" class="field text">
    <label class="left" for="FBForm_question{$iteratorPos}">$title</label>
    $Field
    </div>
    </div>
    <% end_control %>

    This is how I'm generating the fields, but even if I only have 2 fields it creates question0 - question2 divs. Is the last field considered the Action? Is there a way to control through all the fields but one? heres the constructor:

    function __construct($controller, $formName) {
    $fields = new FieldSet(
    new OptionsetField(
    $name='question0',
    $title='Test Multiple Choice Question 1:',
    $source= array(
    'A'=>'Apple',
    'B'=>'Boy',
    'C'=>'Cat',
    'D'=>'Dog'
    )
    ),
    new OptionsetField(
    $name='question1',
    $title='True or False',
    $source= array(
    'T'=>'True',
    'F'=>'False'
    )
    )
    );

    $actions = new FieldSet(
    new FormAction('submit', 'Get Quiz Score')
    );

    parent::__construct($controller, $formName, $fields, $actions);
    }

  • Willr
    Avatar
    Forum Moderator
    5489 Posts

    Re: spread formfields throughout the page Link to this post

    Well it is just a DataObjectSet so you could use <% if First %>, <% if Last %>. Actions shouldn't be included in <% control Fields %> (they are under <% control Actions %>).

  • theoldlr
    Avatar
    Community Member
    103 Posts

    Re: spread formfields throughout the page Link to this post

    I'm almost there... I'm having some trouble finding a work around for the limitation of if statements in the templates (Here's hoping for SS 3.0!)...
    The additional field I was confused about before was the hidden field for security.

    Custom Form class:

    class FBForm extends Form{
    .
    .
    .
    function isFinished($position, $totalItems){
    return($position == ($totalItems-1));
    }
    }

    Template:

    <% control Fields %>
    <% if Last %>
    <label class="left" for="FBForm_question{$iteratorPos}">$title</label>
    $Field
    <% else %>
    <div class="slide question{$iteratorPos}">
    <div id="question{$iteratorPos}" class="field text">
    <label class="left" for="FBForm_question{$iteratorPos}">$title</label>
    $Field
    </div>

    <!--/* None of this works, I dont think Top.isFinished doesnt seem to be the appropriate way to call 'isFinished'
    <% if Top.isFinished(iteratorPos, TotalItems) %>
    <% if Actions %>
    <div class="Actions">
    <% control Actions %>
    $Field
    <% end_control %>
    </div>
    <% end_if %> */-->
    </div>
    <% end_if %>
    <% end_control %>

    Totally stuck on how to make the above comment work. TIA!

  • Willr
    Avatar
    Forum Moderator
    5489 Posts

    Re: spread formfields throughout the page Link to this post

    <% if Top.isFinished(iteratorPos, TotalItems) %>

    You wouldn't need $Top aas you are already in the Form context and isFinished is in the Form class. You would also have to use a simpler if statement by doing something like

    <% if First %>
    <% if isFinished(1) %>...

    <% else %>
    <% isFinished(2) %>..

    708 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.