php - How to split form_widget in twig -
i have radio button form 2 inputs
$builder->add('intakeyear', choicetype::class, array( 'choices' => array( '2017' => 2017, '2018' => 2018, ), 'expanded' => true, 'multiple' => false, 'label' => 'intake year', )); and in twig
<div class="col-sm-3">{{ form_widget(form.intakeyear) }}</div> this renders form
<input /> <label>2017</label> <input /> <label>2018</label> but want split {{ form_widget(form.intakeyear) }} individual options like:
{{ form_widget(form.intakeyear/choice_1/) }} {{ form_widget(form.intakeyear/choice_2/) }} so can add bootstrap class radio-inline label tags , have final html output as:
<label class="radio-inline"><input />2017</label> <label class="radio-inline"><input />2018</label> any ideas?
edit:
here snapshot of output getting:
for better understanding here code: index.html.twig:
{% extends 'base.html.twig' %} {% block stylesheets %} {% stylesheets '@appbundle/resources/public/css/bootstrap.min.css' filter='cssrewrite' %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %} {% endblock %} {% block body %} <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">epita</a> </div> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="#">page 1</a></li> <li><a href="#">page 2</a></li> <li><a href="#">page 3</a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group"> <input type="text" class="form-control" placeholder="search"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> sign up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> login</a></li> </ul> </div> </div> </nav></br></br></br> <div class="container-fluid"> <div class="row"> <div class="col-sm-4"> <h2>candidate application</h2> </div> </div></br> {{ form_start(form, {'attr': {'class': 'form-horizontal'}}) }} <div class="row form-group"> <div class="col-sm-3">{{ form_label(form.name,'name' ,{'attr': {'class': 'sr-only'}}) }}</div> <div class="col-sm-3">{{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}</div> <div class="col-sm-6">{{ form_errors(form.name) }}</div> </div> <div class="row form-group"> <div class="col-sm-3">{{ form_label(form.programtype) }}</div> <div class="col-sm-3">{{ form_widget(form.programtype, {'attr': {'class': 'form-control'}}) }}</div> <div class="col-sm-6">{{ form_errors(form.programtype) }}</div> </div><br/> <div class="row form-group"> <div class="col-sm-3">{{ form_label(form.programofinterest) }}</div> <div class="col-sm-3">{{ form_widget(form.programofinterest, {'attr': {'class': 'form-control'}}) }}</div> <div class="col-sm-6">{{ form_errors(form.programofinterest) }}</div> </div><br/> <div class="row form-group"> <div class="col-sm-3">{{ form_label(form.desiredintake) }}</div> <div class="col-sm-3">{{ form_widget(form.desiredintake, {'attr': {'class': 'form-control'}}) }}</div> <div class="col-sm-6">{{ form_errors(form.desiredintake) }}</div> </div><br/> <div class="row form-group"> <div class="col-sm-3">{{ form_label(form.intakeyear) }}</div> <div class="col-sm-3">{{ form_widget(form.intakeyear, {'label_attr': {'class': 'radio-inline'}}) }}</div> <div class="col-sm-6">{{ form_errors(form.intakeyear) }}</div> </div><br/> <div class="row"> <div class="col-sm-offset-3 col-sm-12">{{ form_row(form.save, {'attr': {'class': 'btn btn-primary'}}) }}</div> </div> {{ form_end(form) }} </div> {% endblock %} {% block javascripts %} {% javascripts '@appbundle/resources/public/js/jquery-3.2.1.min.js' %} <script src="{{ asset_url }}"></script> {% endjavascripts %} {% javascripts '@appbundle/resources/public/js/newcandidate.js' %} <script src="{{ asset_url }}"></script> {% endjavascripts %} <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script> <script src="{{ path('fos_js_routing_js', { callback: 'fos.router.setdata' }) }}"></script> {% javascripts '@appbundle/resources/public/js/bootstrap.min.js' %} <script src="{{ asset_url }}"></script> {% endjavascripts %} {% endblock %} newcandidate.js:
//on page load following $(document).ready(function () { //when program type value changes following $("#candidate_programtype").change(function () { //get program type element var program_type_element = document.getelementbyid("candidate_programtype"); //get program type value var program_type = program_type_element.options[program_type_element.selectedindex].value; //initiate ajax call $.ajax({ type: "post", url: routing.generate('homepage'), contenttype: 'application/x-www-form-urlencoded', //send program_type_id , flag server data: {program_type_id: program_type, flag: 'program_type'}, //on successfull ajax call following success: function (result, status, xhr) { //parse result , save in pi_arr var pi_arr = json.parse(result); //remove options programofinterest select element $("#candidate_programofinterest").empty(); //loop through array pi_arr['pi'] 1 one (var in pi_arr['pi']) { //add option value , text pi_arr['pi'][i] $("#candidate_programofinterest").append($("<option/>", {"value": i, "text": pi_arr['pi'][i]})); } //remove options desiredintake select element $("#candidate_desiredintake").empty(); //loop through array pi_arr['di'] 1 one (var in pi_arr['di']) { //add option value , text pi_arr['di'][i] $("#candidate_desiredintake").append($("<option/>", {"value": i, "text": pi_arr['di'][i]})); } }, //on unsuccessfull ajax call following error: function (xhr, status, error) { } }); }); //when program of interest value changes following $("#candidate_programofinterest").change(function () { //get program of interest element var program_of_interest_element = document.getelementbyid("candidate_programofinterest"); //get program of interest value var program_of_interest = program_of_interest_element.options[program_of_interest_element.selectedindex].value; //initiate ajax call $.ajax({ type: "post", url: routing.generate('homepage'), contenttype: 'application/x-www-form-urlencoded', //send program_of_interest_id , flag server data: {program_of_interest_id: program_of_interest, flag: 'program_of_interest'}, //on successfull ajax call following success: function (result, status, xhr) { //parse result , save in di_arr var di_arr = json.parse(result); //remove options desiredintake select element $("#candidate_desiredintake").empty(); //loop through array di_arr 1 one (var in di_arr) { //add option value , text di_arr[i] $("#candidate_desiredintake").append($("<option/>", {"value": i, "text": di_arr[i]})); } }, //on unsuccessfull ajax call following error: function (xhr, status, error) { } }); }); //when desired intake value changes following $("#candidate_desiredintake").change(function () { //get program type element var program_type_element = document.getelementbyid("candidate_programtype"); //get program type value var program_type = program_type_element.options[program_type_element.selectedindex].value; //get program of interest element var program_of_interest_element = document.getelementbyid("candidate_programofinterest"); //get program of interest value var program_of_interest = program_of_interest_element.options[program_of_interest_element.selectedindex].value; //get desired intake element var desired_intake_element = document.getelementbyid("candidate_desiredintake"); //get desired intake value var desired_intake = desired_intake_element.options[desired_intake_element.selectedindex].value; //initiate ajax call $.ajax({ type: "post", url: routing.generate('homepage'), contenttype: 'application/x-www-form-urlencoded', //send program_of_interest_id , flag server data: {program_type_id: program_type, program_of_interest_id: program_of_interest, desired_intake_id: desired_intake, flag: 'desired_intake'}, //on successfull ajax call following success: function (result, status, xhr) { //parse result , save in intakeyear var intakeyear = json.parse(result); //remove options intakeyear select element $("#candidate_intakeyear").empty(); $("#candidate_intakeyear").append($("<option/>", {"value": intakeyear, "text": intakeyear})); }, //on unsuccessfull ajax call following error: function (xhr, status, error) { } }); }); }); candidatetype.php:
<?php namespace appbundle\form; use symfony\component\form\abstracttype; use symfony\component\form\formbuilderinterface; use symfony\component\form\extension\core\type\texttype; use symfony\bridge\doctrine\form\type\entitytype; use symfony\component\form\extension\core\type\choicetype; use doctrine\orm\entityrepository; use symfony\component\form\extension\core\type\submittype; use symfony\component\optionsresolver\optionsresolver; class candidatetype extends abstracttype { public function buildform(formbuilderinterface $builder, array $options) { $builder->add('name', texttype::class, array()); $builder->add('programtype', entitytype::class, array( 'class' => 'appbundle:programtype', 'query_builder' => function(entityrepository $er) { return $er->createquerybuilder('p') ->where('p.enabled = 1') ->orderby('p.id', 'asc'); }, 'choice_label' => 'description', 'expanded' => false, 'multiple' => false, 'label' => 'program type', )); $builder->add('programofinterest', entitytype::class, array( 'class' => 'appbundle:programofinterest', 'query_builder' => function(entityrepository $er) { return $er->createquerybuilder('p') ->where('p.enabled = 1') ->orderby('p.id', 'asc'); }, 'choice_label' => 'description', 'expanded' => false, 'multiple' => false, 'label' => 'program of interest', )); $builder->add('desiredintake', entitytype::class, array( 'class' => 'appbundle:desiredintake', 'query_builder' => function(entityrepository $er) { return $er->createquerybuilder('p') ->where('p.enabled = 1') ->orderby('p.id', 'asc'); }, 'choice_label' => 'description', 'expanded' => false, 'multiple' => false, 'label' => 'desired intake', )); // $builder->add('intakeyear', choicetype::class, array( // 'choices' => array( // '2017' => 2017, // '2018' => 2018, // ), // 'expanded' => false, // 'multiple' => false, // 'label' => 'intake year', // )); $builder->add('intakeyear', choicetype::class, array( 'choices' => array( '2017' => 2017, '2018' => 2018, ), 'expanded' => true, 'multiple' => false, 'label' => 'intake year', 'label_attr' => array('class' => 'radio-inline'), )); $builder->add('save', submittype::class, array('label' => 'submit')); } public function configureoptions(optionsresolver $resolver) { $resolver->setdefaults(array( 'data_class' => 'appbundle\entity\candidate', )); } }
you don't have split widget up. can via label_attr option, either in form definition or in twig template itself:
$builder->add('intakeyear', choicetype::class, array( 'choices' => array( '2017' => 2017, '2018' => 2018, ), 'expanded' => true, 'multiple' => false, 'label' => 'intake year', 'label_attr' => array('class' => 'radio-inline'), )); or
{{ form_widget(form.intakeyear, {'label_attr': {'class': 'radio-inline'}}) }}
Comments
Post a Comment