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.

Form Questions /

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

spread formfields throughout the page


Go to End
Reply


6 Posts   863 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, 5521 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, 5521 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, 5521 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) %>..