can't submit a form using redactor in symfony

Question

I have created a form with a textarea in Symfony2 using form-builder. I want to use redactor in my form for text editing . Everything works fine until i didn't use redactor library. But when i applied class redactor to my textarea, it doesn't get submitted in my post reuqest. I tried to set required=false also, but that didn't work either.

Form-buider:

public function buildForm(FormBuilderInterface $builder, array $options) {
    $builder
            ->add('templateTitle', 'text', array('label' => 'template.fields.name'))
            ->add('templateType', 'text', array('label' => 'template.fields.type'))
            ->add('templateCode','textarea',array('required'=>false))
            ->add('submit', 'submit', array('label' => 'template.fields.submit'));
}

HTML:

      <div style="margin-top:0; margin-bottom: 20px;">
                            {{ form_widget(create_form.templateCode,{ 'attr': {'class': "redactor"} }) }}
                            {{ form_errors(create_form.templateCode) }}
                        </div>

<link href="{{ asset('bundles/theme/editors/redactor/redactor.css') }}" rel="stylesheet">
  <script type="text/javascript" src="{{ asset('bundles/theme/editors/redactor/redactor.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(
        function()
        {
               $('.redactor').redactor({
                 minHeight: 300
               });
          }
    );
    </script>

Rendered Code of redactor in HTML :

<div class="tab-pane active" id="code">
    <div style="margin-top:0; margin-bottom: 20px;">
        <div class="redactor_box"><ul class="redactor_toolbar" id="redactor_toolbar_0"><li>
                    <a href="javascript:;" title="HTML" tabindex="-1" class="redactor_btn redactor_btn_html"
                       ></a></li><li class="redactor_separator"></li>
                <div class="redactor_dropdown redactor_dropdown_box_formatting" style="display: none;">
                    <a href="#" class=" redactor_dropdown_p" tabindex="-1">Normal text</a>
                    <a href="#" class="redactor_format_blockquote redactor_dropdown_blockquote" tabindex="-1">Quote</a>
                    <a href="#" class="redactor_format_pre redactor_dropdown_pre" tabindex="-1">Code</a>
                    <a href="#" class="redactor_format_h1 redactor_dropdown_h1" tabindex="-1">Header 1</a>
                    <a href="#" class="redactor_format_h2 redactor_dropdown_h2" tabindex="-1">Header 2</a>
                    <a href="#" class="redactor_format_h3 redactor_dropdown_h3" tabindex="-1">Header 3</a>
                    <a href="#" class="redactor_format_h4 redactor_dropdown_h4" tabindex="-1">Header 4</a>
                    <a href="#" class="redactor_format_h5 redactor_dropdown_h5" tabindex="-1">Header 5</a>
                </div>
                <li>
                    <a href="javascript:;" title="Formatting" tabindex="-1" class="redactor_btn redactor_btn_formatting"></a>
                </li>
                <li class="redactor_separator"></li>
                <li>
                    <a href="javascript:;" title="Bold" tabindex="-1" class="redactor_btn redactor_btn_bold"></a>
                </li>
                <li>
                    <a href="javascript:;" title="Italic" tabindex="-1" class="redactor_btn redactor_btn_italic"></a>
                </li>
                <li>
                    <a href="javascript:;" title="Deleted" tabindex="-1" class="redactor_btn redactor_btn_deleted"></a>
                </li>
                <li class="redactor_separator"></li>
                <li>
                    <a href="javascript:;" title="• Unordered List" tabindex="-1" class="redactor_btn redactor_btn_unorderedlist"></a>
                </li>
                <li>
                    <a href="javascript:;" title="1. Ordered List" tabindex="-1" class="redactor_btn redactor_btn_orderedlist"></a>
                </li>
                <li><a href="javascript:;" title="&lt; Outdent" tabindex="-1" class="redactor_btn redactor_btn_outdent"></a>
                </li>
                <li><a href="javascript:;" title="&gt; Indent" tabindex="-1" class="redactor_btn redactor_btn_indent"></a></li>
                <li class="redactor_separator"></li>
                <li><a href="javascript:;" title="Insert Image" tabindex="-1" class="redactor_btn redactor_btn_image"></a></li>
                <li><a href="javascript:;" title="Insert Video" tabindex="-1" class="redactor_btn redactor_btn_video"></a></li>
                <div class="redactor_dropdown redactor_dropdown_box_table" style="display: none;">
                    <a href="#" class=" redactor_dropdown_insert_table" tabindex="-1">Insert Table</a>
                    <a class="redactor_separator_drop" tabindex="-1"></a>
                    <a href="#" class=" redactor_dropdown_insert_row_above" tabindex="-1">
                        Add Row Above</a><a href="#" class=" redactor_dropdown_insert_row_below" tabindex="-1">
                        Add Row Below</a><a href="#" class=" redactor_dropdown_insert_column_left" tabindex="-1">
                        Add Column Left</a><a href="#" class=" redactor_dropdown_insert_column_right" tabindex="-1">
                        Add Column Right</a><a class="redactor_separator_drop" tabindex="-1"></a>
                    <a href="#" class=" redactor_dropdown_add_head" tabindex="-1"
                       >Add Head</a>
                    <a href="#" class=" redactor_dropdown_delete_head" tabindex="-1">Delete Head</a>
                    <a class="redactor_separator_drop" tabindex="-1"></a>
                    <a href="#" class=" redactor_dropdown_delete_column" tabindex="-1">Delete Column</a>
                    <a href="#" class=" redactor_dropdown_delete_row" tabindex="-1">Delete Row</a>
                    <a href="#" class=" redactor_dropdown_delete_table" tabindex="-1">Delete Table</a>
                </div>
                <li><a href="javascript:;" title="Table" tabindex="-1" class="redactor_btn redactor_btn_table"></a></li>
                <div class="redactor_dropdown redactor_dropdown_box_link" style="display: none;">
                    <a href="#" class=" redactor_dropdown_link" tabindex="-1">Insert link</a>
                    <a href="#" class=" redactor_dropdown_unlink" tabindex="-1">Unlink</a>
                </div>
                <li><a href="javascript:;" title="Link" tabindex="-1" class="redactor_btn redactor_btn_link"></a></li>
                <li class="redactor_separator"></li>
                <div class="redactor_dropdown redactor_dropdown_box_alignment" style="display: none;">
                    <a href="#" class=" redactor_dropdown_alignleft" tabindex="-1">Align text to the left</a>
                    <a href="#" class=" redactor_dropdown_aligncenter" tabindex="-1">Center text</a>
                    <a href="#" class=" redactor_dropdown_alignright" tabindex="-1">Align text to the right</a>
                    <a href="#" class=" redactor_dropdown_justify" tabindex="-1">Justify text</a>
                </div><li>
                    <a href="javascript:;" title="Alignment" tabindex="-1" class="redactor_btn redactor_btn_alignment"></a></li>
                <li class="redactor_separator"></li><li><a href="javascript:;" title="Insert Horizontal Rule" tabindex="-1" class="redactor_btn redactor_btn_horizontalrule"></a></li></ul><div class="redactor_redactor redactor_editor" contenteditable="true" dir="ltr" style="min-height: 300px;"><p>​</p>
            </div>
            <textarea id="template_type_templateCode" name="template_type[templateCode]" class="redactor" dir="ltr" style="display: none;"></textarea></div>
        <ul><li>This is my error message</li></ul>
    </div>


    <br>

    <div class="pull-right" id="submit1">
        <button type="submit" action="submit" class="btn btn-primary btn-sm">Submit</button>
    </div>
</div>

Any one can help ?

Answer 1

I can see that your textarea is kept hidden. This must have been done by the texteditor plugin that you have used. But you need to also check that the edited text is copied to your actual textarea before submitting your form.

If this is your problem then then solution is mentioned here:

Imperavi Redactor content not being copied over to hidden textarea