Symfony2/Twig multiple form handling on page

Question

Asked a similar question as a general topic, but didn't really get an answer that could help. I have the following template

{% 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 %}

To put it simply, I have a form which takes an command input and when submitted the command is executed against an API. The view is then returned the response which is displayed in the second div. The response looks something like the following

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

The Letter/number combination is produced by the seat ~ availability. I need to make these combinations selectable, when selected they can change colour. To do this I simply done

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

I am going to provide a submit button (without a form) and when submitted, I need to pass the appropriate data to my ajax function. This data should include all the data on the line with only the selected seat/availability combos. So if I selected J9 and C9 from row 1 and T7 from line 3, the data which is submitted should be

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

What would be the best way to get the correct data back collected and passed back to my Ajax function (and eventually my controller)?

Thanks

bassplayer7 · Accepted Answer · 2015-03-15 02:19:48Z

2

I would use an <input type="checkbox" /> to make the form part of the page clear and easily handle it's state.

For example, where you have:

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

I would put something like:

{% 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 %}

Obviously, you will need to put your <form /> element outside of the for loop for completion as well.

This works because label's with a for attribute that matches an input's id attribute will toggle that associated input. As a result, if you remove the style which hides the checkbox, and click the span contents, it will check or un-check the input. Now you have an actual form value to work with which is very easy to handle with javascript and AJAX.

With this, you can easily set the value of each input to the corresponding row/seat, and you could even go so far as to use the HTML5 "checked" when applicable.

Update: (too much for a comment)
You could pass more information to your controller using either or a combination of two approaches. One would be to create a <input type="hidden" /> with information. I could picture this being outside the for loop with ones for the flight number, departure and arrival information, and the like: meaning anything that would apply to every row and every seat.

The other way to pass information to the controller is to use form "arrays".

It would be something like this (notice the square brackets):

{% 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 %}

You would then receive an array with the submitted data like this (if two seats were selected) that you could loop through. For example, if a user choose two seats on the same row you would have:

[row1] => [seat1, seat2]

Update2
I just realized that if the checkbox is checked, that means that seat would be the one that user wants (and while it previously was available, because he took it, it no longer is). So, instead of passing "desired" as the value of the <input />, why not assign the "seat-desired" to the row? To explain myself more clearly:

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

Now, every "seat" that is passed is one that you know is "chosen".

In your controller, you would loop through seat to find any row. Any rows that were found with the loop would then find the seat. For example:

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

edited Mar 15, 2015 at 2:19

answered Mar 14, 2015 at 22:12

bassplayer7

9341 gold badge13 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nick Price Over a year ago

Thanks, I was thinking about doing something similar but was worried I would mess up my look and feel, but with a little tweaking this should work. One thing I am wondering though, if I post the selected seat/availability to the controller, how can I get the other data from the row over?

bassplayer7 Over a year ago

@NickPrice, I updated my answer. Let me know if something doesn't make sense or won't work. The [] approach is somewhat limited (as you can still only assign one value to an array key (the last one), but you can use the keys to your advantage here, I believe.

Nick Price Over a year ago

Thanks, just going through it now. Only part I am struggling with is handling it in the controller. How do I know what post variables to check? Normally you would do something like if (isset($_POST['check1'])) but in this case the names are dynamically generated so I am not sure what the approach would be?

bassplayer7 Over a year ago

@NickPrice, another update. Give that idea a whirl. Hopefully something in it will at least point you in the right direction.

bassplayer7 Over a year ago

@NickPrice, no idea, honestly. ; ) It is just a way for you to pass that to the controller if you have the row. If you don't and, say, each seat is mapped to a particular row which you would figure out in the controller, it would be easy to pull the row info from the input name.

|

Collectives™ on Stack Overflow

Symfony2/Twig multiple form handling on page

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related