Question

OP注意：只是li元素没有以我忘记的形式传递。

有关上下文的信息，请参阅我的Previous Question，了解在呈现下拉列表时我需要如何将select和option代码更改为ul个li代码使用Symfony 2表单，因为它们在我选择的CSS框架中看起来很好用。

由于更改了表单元素的呈现方式，似乎提交后数据不再存在。

我正在覆盖{% choice_widget_* %}字段的choice部分，以便将这些部分更改为ul和li。这是我的改变：

{%- block choice_widget_collapsed -%}
    {%- if required and empty_value is none and not empty_value_in_choices and not multiple -%}
        {% set required = false %}
    {%- endif -%}
    <ul {{ block('widget_attributes') }}>
        {%- if preferred_choices|length > 0 -%}
            {% set options = preferred_choices %}
            {{- block('choice_widget_options') -}}
            {%- if choices|length > 0 and separator is not none -%}
                <li disabled="disabled">{{ separator }}</li>
            {%- endif -%}
        {%- endif -%}
        {%- set options = choices -%}
        {{- block('choice_widget_options') -}}
    </ul>
{%- endblock choice_widget_collapsed -%}

{%- block choice_widget_options -%}
    {% for group_label, choice in options %}
        {%- if choice is iterable -%}
            <optgroup label="{{ group_label|trans({}, translation_domain) }}">
                {% set options = choice %}
                {{- block('choice_widget_options') -}}
            </optgroup>
        {%- else -%}
            <li value="{{ choice.value }}"{% if choice is selectedchoice(value) %} selected="selected"{% endif %}><a href="#">{{ choice.label|trans({}, translation_domain) }}</a></li>
        {%- endif -%}
    {% endfor %}
{%- endblock choice_widget_options -%}

我从Symfony 2 github source找到并修改了此代码，它允许我渲染我的表单：

enter image description here

问题：提交此表单时，＆＃34; target＆＃34;字段很好，但我的重写似乎已经破坏了从下拉列表中检索数据的方式，我的调试显示空数据字段。

这是我的类型中setDefaultOptions()中的中断行：

breakline

这是表单数据。请注意modelData确实存在于＆＃34; target＆＃39 ;,这是一个标准输入字段，以及如何为定位器下拉列表（突出显示）不存在modelData：

wtf

因为我已经改变了表单的呈现方式，所以数据是空的，但我该怎么做呢？

我可以放置某种适配器或数据转换器来处理这种变化吗？需要做什么？我可以想象这种情况发生在任何想要主题自己形式的人身上，并删除一些在渲染过程中被symfony注入的令人讨厌的div。我该怎么办？

Answer 1

<li></li>元素不是表单元素（因此不会随表单一起提交）。

您需要添加一个表单提交处理程序（使用javascript），将li元素转换回某种表单元素。

理想情况下，您会将它们转换回<option></option>元素，因此您不需要在服务器上使用数据转换器。

jQuery样板代码：

$(document).ready(function() {
    $("#myForm1").submit(function() {
        //Gets fired when the form is about to be submitted, but before the actual request
        $("#myForm1").append("<optgroup name=.......");          
        $("ul[name=\"somebundle_formname_fieldname\"]").children("li").each(function () {
            $("#myForm1").find("<optgroup name=.......").append("<option value=" + $(this).attr("value") +">bla</option>");
        });
    });
});

Vanilla JS（IE9 +，Chrome，Firefox）样板代码：

document.addEventListener("DOMContentLoaded", function() {
    var myForm1 = document.getElementById("myForm1");
    myForm1.addEventListener('submit', function(e) {
        //Gets fired when the form is about to be submitted, but before the actual request
        var tmpOptGroup = document.createElement("optgroup");
        tmpOptGroup.name = "somebundle_formname_fieldname";
        myForm1.appendChild(tmpOptGroup);

        var liElements = document.querySelectorAll("ul[name=\"somebundle_formname_fieldname\"] li");
        for(var i=0;i<liElements.length;i++) {
            var currentLiElement = liElements[i];
            //add option, see jquery above
        }
    });
});

自定义表单主题在Symfony2中断开From :: model Data属性

1 个答案: