Skip to main content

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();