5. Submit selected seats

Your ticket buyer has selected seats on the interactive floor plan. Now you need to pass those seats to your server-side code, so you can later on book them via the Seats API.

There are 3 options:

using a hidden form field (that's generated by the seats.io code)
using a javascript variable on the seatsio.SeatingChart object
by keeping track of it yourself (not recommended)

using selectedObjectsInputName#

If you add selectedObjectsInputName:"aFormFieldNameYouChooseYourself" to the seating chart configuration, the Seats Renderer will add a hidden input field with that name to your form. Note that the div in which you render the chart needs to be embedded in a <form> tag for this to work. Like so:

<form id="myTicketBuyerForm">
    <div id="chart"></div>
</form>

<script src="https://cdn-{region}.seatsio.net/chart.js"></script>
<script>
    new seatsio.SeatingChart({
        divId: 'chart',
        workspaceKey: 'your workspace key',
        event: 'your event key',
        selectedObjectsInputName: 'selectedSeatsField'
    }).render();
</script>

using chart.selectedObjects#

new seatsio.SeatingChart({}).render(); returns a seatsio.SeatingChart object, that has a selectedObjects property. This is a JavaScript array of strings that contains the selected object labels. Of course, we update the value on each select and deselect.

var seatingChart = new seatsio.SeatingChart({
    divId: 'chart',
    workspaceKey: 'your workspace key',
    event: 'your event key'
}).render();

console.log(seatingChart.selectedObjects); 

using onObjectSelected and onObjectDeselected#

by listening to the onObjectSelected and onObjectDeselected events, you can keep track of the selected objects yourself in your code.

var selectedSeats = [];

new seatsio.SeatingChart({
    divId: 'chart',
    workspaceKey: 'your workspace key',
    event: 'your event key',
    onObjectSelected: function (object) {
        // add the selected seat id to the array
        selectedSeats.push(object.label);
    },
    onObjectDeselected: function (object) {
        // remove the deselected seat id from the array
        var index = selectedSeats.indexOf(object.label);
        if (index !== -1) selectedSeats.splice(index, 1);
    }
}).render();