6. 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.io API.

There are 3 options:

1. Using a hidden form field (that's generated by the Seats.io code)
2. Using a javascript variable on the seatsio.SeatingChart object
3. By keeping track of it yourself (not recommended)

Using selectedObjectsInputName

If you add selectedObjectsInputName:"aFormFieldNameYouChooseYourself" to the seating chart configuration, the Seats.io 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. 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();