title: Get variables from javascript and build a sql query on php for jQuery-Seat-Charts
body: <p><br />
  I'm using <a href="https://github.com/mateuszmarkowski/jQuery-Seat-Charts/tree/gh-pages" rel="nofollow">jQuery-Seat-Charts</a> to build a simple booking system (if i can name it a system) for our company buses. Since I'm not expert on javascript, i need your precious help on figuring out how to get this done. What i just want is to get the variables from the javascript and build a sql query on php to store the whole informations in the MySQL database. What i have now is the following:<br /></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
          &lt;div class="container"&gt;
              &lt;div id="seat-map"&gt;
                  &lt;div class="front-indicator"&gt;Front&lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div id="legend"&gt;&lt;/div&gt;
              &lt;div class="booking-details"&gt;
                  &lt;h2&gt;Booking Details&lt;/h2&gt;
  
                  &lt;h3&gt; Selected Seats (&lt;span id="counter"&gt;0&lt;/span&gt;):&lt;/h3&gt;
                  &lt;ul id="selected-seats"&gt;&lt;/ul&gt;
  
                  Total: &lt;b&gt;&lt;span id="total"&gt;0&lt;/span&gt; &amp;#8364;&lt;/b&gt;
  
                  &lt;button class="checkout-button"&gt;Book&amp;raquo;&lt;/button&gt;
  
              &lt;/div&gt;
              &lt;div id="formulari"&gt;
                  &lt;ul id="formulari-ul"&gt; &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="`jquery.seat-charts.js`"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          var firstSeatLabel = 1;
  
          $(document).ready(function() {
              var $cart = $('#selected-seats'),
                  $formulari = $('#formulari-ul'),
                  $counter = $('#counter'),
                  $total = $('#total'),
                  sc = $('#seat-map').seatCharts({
                  map: [
                      '___f',
                      'ff',
                      'ee_e',
                      'ee_e',
                      'ee_e',
                      'eeee',
                  ],
                  seats: {
                      f: {
                          price   : 60,
                          classes : 'first-class', //your custom CSS class
                          category: 'First Class'
                      },
                      e: {
                          price   : 55,
                          classes : 'other-seats', //your custom CSS class
                          category: 'Other Seats'
                      }                   
  
                  },
                  naming : {
                      top : false,
                      getLabel : function (character, row, column) {
                          return firstSeatLabel++;
                      },
                  },
                  legend : {
                      node : $('#legend'),
                      items : [
                          [ 'f', 'available',   'First Class' ],
                          [ 'e', 'available',   'Other Seats'],
                          [ 'f', 'unavailable', 'Booked']
                      ]                   
                  },
                  click: function () {
                      if (this.status() == 'available') {
                          //let's create a new &lt;li&gt; which we'll add to the cart items
                          $('&lt;li&gt;&lt;strong&gt;Seat #'+this.settings.label+' - Price: '+this.data().price+'&amp;#8364; &lt;/strong&gt; ('+this.data().category+') &lt;a href="#" class="cancel-cart-item"&gt;[cancel]&lt;/a&gt;&lt;/li&gt;')
                              .attr('id', 'cart-item-'+this.settings.id)
                              .data('seatId', this.settings.id)
                              .appendTo($cart);
  
                          $('&lt;p&gt;&lt;strong&gt;[X] Seat #'+this.settings.label+':&lt;/strong&gt; &lt;input name="fullname" type="text" value="Full Name" /&gt;&lt;input name="birthday" type="text" value="dd/mm/yyyy" size="10" /&gt;&lt;input name="placeBirth type="text" value="Place" size="10" /&gt;&lt;input name="nrPass" type="text" value="Nr Pass" size="10" /&gt;&lt;input name="passFrom" type="text" value="dd/mm/yyyy" size="10" /&gt;&lt;input name="passTo" type="text" value="dd/mm/yyyy" size="10" /&gt;&lt;/p&gt;')
                              .attr('id', 'form-item-'+this.settings.id)
                              .data('seatId', this.settings.id)
                              .appendTo($formulari);
  
                          /*
                           * Lets update the counter and total
                           *
                           * .find function will not find the current seat, because it will change its stauts only after return
                           * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
                           */
                          $counter.text(sc.find('selected').length+1);
                          $total.text(recalculateTotal(sc)+this.data().price);
  
                          return 'selected';
                      } else if (this.status() == 'selected') {
                          //update the counter
                          $counter.text(sc.find('selected').length-1);
                          //and total
                          $total.text(recalculateTotal(sc)-this.data().price);
  
                          //remove the item from our cart
                          $('#cart-item-'+this.settings.id).remove();
  
                          //seat has been vacated
                          return 'available';
                      } else if (this.status() == 'unavailable') {
                          //seat has been already booked
                          return 'unavailable';
                      } else {
                          return this.style();
                      }
                  }
              });
  
              //this will handle "[cancel]" link clicks
              $('#selected-seats').on('click', '.cancel-cart-item', function () {
                  //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
                  sc.get($(this).parents('li:first').data('seatId')).click();
              });
  
              //let's pretend some seats have already been booked
              sc.get(['1_4']).status('unavailable');
  
      });
  
      function recalculateTotal(sc) {
          var total = 0;
  
          //basically find every selected seat and sum its price
          sc.find('selected').each(function () {
              total += this.data().price;
          });
  
          return total;
      }
  
      &lt;/script&gt;
  </code></pre>
  
  <p>As you can see, i have the function on click that, when the user clicks on any available seat, will appear a form that should be filled from the user with it's details. I have progressed until here, and now i don't know how to get the javascript variables as seat number, seat price, and seat code (all seats are coded like X_Y where X = the row and Y = the seat number at that row); and build a sql query with those variables and with informations from the form.<br />
   Hope that I was clear on explaining my needs and issue, and that someone can help me on putting me on the right track ;-)<br />
  Thanks to everyone!
  <br />
  P.S. The jquery.seat-chart.js file can be found <a href="https://github.com/mateuszmarkowski/jQuery-Seat-Charts/blob/gh-pages/jquery.seat-charts.js" rel="nofollow">here</a>!</p>