Question

问一个类似的问题作为一般性话题，但并没有真正得到一个可能有帮助的答案。我有以下模板

{% block main %}
    <div class="col-md-4">
        <section class="panel panel-default">
            <header class="panel-heading">
                <h3 class="panel-title">Terminal</h3>
            </header>

            <div class="panel-body">
                <form action="{{ path('NickAlertBundle_tsubmit') }}" method="post" enctype="multipart/form-data" class="terminalForm" id="terminalForm">
                    <div class="row">
                        <div class="col-md-12">
                            <input type="text" class="addMargin" id="terminal_command" name="terminal_command" placeholder=">">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-8 col-md-offset-4">
                            <input type="submit" class="btn btn-default" id="terminal_submit" value="Submit">
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </div>

    <div class="col-md-8" id="terminal-window">
        <table class="terminalAvailability">
            {% if data is defined %}
                {% for info in data %}
                    <tr>
                        <td class="flightNumber">{{ info.flightNumber }}</td>
                        <td class="details">{{ info.from ~ info.to }}</td>
                        {% for seat, availability in info.seats %}
                            <td class="seatClass"><span>{{ seat ~ availability }}</span></td>
                        {% endfor %}
                        <td class="otherInfo">{{ info.other }}</td>
                    </tr>
                {% endfor %}
            {% endif %}
        </table>
    </div>

    <div class="modal"></div>
{% endblock %}

简单地说，我有一个接受命令输入的表单，当提交时，命令是针对API执行的。然后返回视图，显示在第二个div中的响应。响应类似于以下

AB123   |  LHRLAX  |  J9  I7  C9  D9  A6   |  -0655 0910
--------------------------------------------------------
CF1153  |  LHRLAX  |  I7  J7  Z9  T9  V7   |  -0910 1305
--------------------------------------------------------
WF133   |  LHRLAX  |  Y7  T7  J9  T9  C9   |  -1500 2206

字母/数字组合由座位〜可用性产生。我需要选择这些组合，选择它们可以改变颜色。要做到这一点，我只需完成

$(function() {
    $( ".terminalAvailability .seatClass" ).on( "click", function() {
        $(this).find('span').toggleClass('green');
    });
});

我将提供一个提交按钮（没有表单），在提交时，我需要将适当的数据传递给我的ajax函数。此数据应包括线路上仅包含所选座位/可用性组合的所有数据。因此，如果我从第1行选择J9和C9，从第3行选择T7，则提交的数据应为

AB123   |  LHRLAX  |  J9  C9  |  -0655 0910
--------------------------------------------------------
WF133   |  LHRLAX  |  T7  |  -1500 2206

什么是收集正确数据并将其传回给我的Ajax函数（最终是我的控制器）的最佳方法？

由于

Answer 1

我会使用<input type="checkbox" />使页面的表单部分清晰，并轻松处理它的状态。

例如，你有：

{% for seat, availability in info.seats %}
    <td class="seatClass"><span>{{ seat ~ availability }}</span></td>
{% endfor %}

我想说的是：

{% for seat, availability in info.seats %}
    <td class="seatClass">
        <label for="{{ seat }}">
            <span>{{ seat ~ availability }}</span>
        </label>
        <input type="checkbox" id="{{ seat }}" name="{{ seat }}" style="display: none;" />
    </td>
{% endfor %}

显然，您需要将<form />元素放在for循环之外，以便完成。

这是有效的，因为带有与for input属性匹配的id属性的标签会切换关联的input。因此，如果您删除隐藏复选框的样式，并单击范围内容，它将选中或取消选中input。现在你有一个实际的表单值，使用javascript和AJAX很容易处理。

通过这种方式，您可以轻松地将每个输入的值设置为相应的行/座位，甚至可以在适用时使用HTML5“已选中”。

更新：（评论太多）
您可以使用两种方法中的一种或两种方法将更多信息传递给控制器。一种方法是创建一个包含信息的<input type="hidden" />。我可以想象这是在for循环之外的航班号，出发和到达信息等等：意味着任何适用于每一行和每个座位的东西。

将信息传递给控制器的另一种方法是使用“数组”形式。

这将是这样的（注意方括号）：

{% for seat, availability in info.seats %}
    <td class="seatClass">
        <label for="{{ seat }}">
            <span>{{ seat ~ availability }}</span>
        </label>
        <input type="checkbox" id="{{ seat }}" name="{{ row }}[{{ seat }}]" style="display: none;" />
    </td>
{% endfor %}

然后，您将收到一个包含所提交数据的数组（如果选择了两个席位），您可以循环使用。例如，如果用户在同一行中选择两个席位：

[row1] => [seat1, seat2]

<强> UPDATE2
我刚刚意识到，如果选中复选框，这意味着座位将是用户想要的座位（虽然它之前可用，因为他接受了它，它不再是）。那么，为什么不将“需要座位”分配给行，而不是将“期望”作为<input />的值传递？为了更清楚地解释自己：

<input type="checkbox" id="{{ seat }}" name="seats[{{ row }}][]" style="display: none;" value="{{ seat }}" />

现在，通过的每个“席位”都是您知道“被选中”的席位。

在您的控制器中，您将遍历seat以查找任何行。通过循环找到的任何行都可以找到座位。例如：

foreach ($request->request->get('seats') as $row) {
    foreach ($row as $seat) {
        $seat->setSeatAsTaken($flight, $passenger);
    }
}

Symfony2 / Twig在页面上进行多种表单处理

1 个答案: