How to render each items of ChoiceType to add to them div and classes as I need

user_5718610 0
Viewed 1229

In past I render a form, but now I render each element of form in template.

How to render each items of ChoiceType to add to them div and classes as I need.

I need to group all options in pairs wit two in one div <div class="col-xs-2"> <label class="checkbox"><input type="checkbox" class="styler" checked=""> 1</label> <label class="checkbox"><input type="checkbox" class="styler"> 2</label> </div> and also and also for all options.

I need to transform the Symfony 3 code (form elemetn of type ChoiceType) from :

<div class="col-xs-12">
  <div class="form-group">
    <label class="col-xs-2 text-right control-label">{% trans %}Example{% endtrans %}</label>
    <div class="col-xs-2">
      <label class="checkbox">{{ form_widget(form.examples, {'attr': {'class': 'form-control styler', 'checked': ''}}) }} Example</label>
    </div>
  </div>
</div>

To that form:

<div class="col-xs-12">
  <div class="form-group">
    <label class="col-xs-2 text-right control-label">{% trans %}Example{% endtrans %}</label>
    <div class="col-xs-2">
      <label class="checkbox"><input type="checkbox" class="styler" checked=""> 1</label>        
      <label class="checkbox"><input type="checkbox" class="styler"> 2</label>        
    </div>
    <div class="col-xs-3">
      <label class="checkbox"><input type="checkbox" class="styler"> 3</label> 
      <label class="checkbox"><input type="checkbox" class="styler" checked=""> 4</label>       
    </div>
    <div class="col-xs-3">
      <label class="checkbox"><input type="checkbox" class="styler" checked=""> 5</label> 
      <label class="checkbox"><input type="checkbox" class="styler"> 6</label>       
    </div>
  </div>
</div>

I am new in Symfony. Thank you for help.

symfony
2 Answers

I see that the post is from a long time ago but I was expose to the same issue.

I first try to solve the issue with PHP in the FromType but after several failure I solve it in JS.

You just need to call createDivWithFromFieldClassForEachPairOfInputAndLabel() with a NodeList of input in argument and adapte with your CSS the name of the class in he setAttribute() method.

createDivWithFromFieldClassForEachPairOfInputAndLabel: function (inputs) {
console.log("createDivWithFromFieldClassForEachPairOfInputAndLabel()");

// We create a array of formFields.
let formFields = [];

// For each input of inputs.
for (input of inputs) {
  // We create a HTML element with the tag name div.
  let formField = document.createElement("div");
  // We set a class and and a class name on the created element.
  formField.setAttribute("class", "form-field");
  // We insert a formField before each input.
  input.insertAdjacentElement("beforebegin", formField);
  // We push each formField to formFields.
  formFields.push(formField);
}

// For each field of formFields.
for (field of formFields) {
  // We get each input which are the nextElementSibling of each field.
  let input = field.nextElementSibling;
  // We get each label which are the nextElementSibling each field.
  let label = input.nextElementSibling;
  // We add each input in each field.
  field.appendChild(input);
  // We add each label in each field.
  field.appendChild(label);
}

},

user_184801700
Related