Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Form Questions /

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

spread formfields throughout the page


Go to End


6 Posts   1070 Views

Avatar
theoldlr

Community Member, 103 Posts

24 February 2011 at 3:04am

Edited: 24/02/2011 3:10am

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!

Avatar
Willr

Forum Moderator, 5523 Posts

24 February 2011 at 8:28pm

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

Avatar
theoldlr

Community Member, 103 Posts

25 February 2011 at 11:30am

Edited: 25/02/2011 11:36am

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);
    }

Avatar
Willr

Forum Moderator, 5523 Posts

25 February 2011 at 12:34pm

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 %>).

Avatar
theoldlr

Community Member, 103 Posts

26 February 2011 at 5:53am

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!

Avatar
Willr

Forum Moderator, 5523 Posts

26 February 2011 at 12:24pm

<% 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) %>..