Skip to main content

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:

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