Submit form with selected concert seats with JavaScript and HTML

Question

I have a form with input field

<select name="tickets" multiple>
  <option value="__ticket_id__">Ticket #</option>
  <option value="__ticket_id__">Ticket #</option>
  <option value="__ticket_id__">Ticket #</option>
  <option value="__ticket_id__">Ticket #</option>
  ...
</select>

With this select, I can choose which ticket ids I want to submit with the form.

But now I want to create a seat selector, so I need all the tickets as div elements. The seats will look something like

<div class="seats">
  <div class="seat">Seat Number</div>
  <div class="seat">Seat Number</div>
  <div class="seat">Seat Number</div>
  <div class="seat">Seat Number</div>
  <div class="seat">Seat Number</div>
</div>

How can I make these div elements selectable? I know that I with simple javascript can listen for clicks and then change the class of the div element.

So a solution could be

$('.seat').click(function () {
  $(this).toggleClass('.selected-seat');
});

and then something like

$('form').submit(function () {
  event.preventDefault();

  // submit array of ids of all those div elements with class 'selected-seat'
});

However, this approach seems a bit wrong to me. Could another solution be to make the elements into something like

<div class="seats">
  <div class="seat">Seat Number <input type="checkbox" name="seats[]" value="__ticket_id__"></div>
  <div class="seat">Seat Number <input type="checkbox" name="seats[]" value="__ticket_id__"></div>
  <div class="seat">Seat Number <input type="checkbox" name="seats[]" value="__ticket_id__"></div>
  <div class="seat">Seat Number <input type="checkbox" name="seats[]" value="__ticket_id__"></div>
  <div class="seat">Seat Number <input type="checkbox" name="seats[]" value="__ticket_id__"></div>
</div>

and then submit my form exactly as I normally submit a form without any javascript?

How are these seat selectors normally done?

score 0 · Answer 1 · answered Mar 30 '17 at 06:30

So I made a small sample of code for how you should go about this problem. I would suggest you to use jQuery a bit so that you can get flexibility on creating the design you are looking to create.

In the code below I just created a hidden input box which will carry the value you press on. You didn't mention if you want multiple select or single seat selector. This code is for single selector.

jQuery(document).ready(function(){
  jQuery('.seat').click(function(){
    jQuery(this).css('background','#fff');
    var seatNumber = jQuery(this).find('span').text();
    jQuery(this).find('input').attr('value',seatNumber);
  });
});

.seat{
background:#eee;
margin-top:5px;
cursor:pointer;
}
.value{
color:blue;
font-weight:800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="seats">
  <div class="seat">
    Seat Number <span class='value'>1</span>
    <input type='text' name='seatNumber' hidden>
  </div>
  <div class="seat">
    Seat Number <span class='value'>2 </span>
    <input type='text' name='seatNumber' hidden>
  </div>
  <div class="seat">
    Seat Number 
    <span class='value'>3</span>
    <input type='text' name='seatNumber' hidden>
  </div>
  <div class="seat">
    Seat Number 
    <span class='value'>4</span>
    <input type='text' name='seatNumber' hidden>
  </div>
  <div class="seat">
    Seat Number 
    <span class='value'>5</span>
    <input type='text' name='seatNumber' hidden>
  </div>
  
   
</div>

Thanks. I will definitely need multiple select. But the big issue is how I submit `
..
` and send the selected seat ids with the form to the server — Jamgreen, Mar 30 '17 at 06:37
@Jamgreen : Submitting the for should be usual i think. It depends on the what language you are using for server side. You can ask a separate question for submitting the form or refer to this question : [link](http://stackoverflow.com/questions/8325775/how-to-get-all-values-of-multiple-select-box-through-post?noredirect=1&lq=1) — Ash Singh, Mar 30 '17 at 07:43

score 0 · Answer 2 · answered Mar 30 '17 at 07:34

u can submit the form as usually. the form will auto detect checked checkbox has been select. hope this help.

$('.seat').click(function () {
 if($(this).attr("class") == "seat"){
    $(this).addClass('selected-seat');
    $(this).children().attr('checked', "checked");
   }
   else{
    $(this).removeClass('selected-seat');
    $(this).children().prop('checked', true);;
   }
});

 .selected-seat{
  background : #f00;
 }
 input[type="checkbox"]{
  display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form method="post" action="http://localhost/yourProject/SubmitProsesHere.php">
<div class="seats">
  <div class="seat">Seat Number 1
   <input type="checkbox" name="seats[]" value="__ticket_id__5">
  </div>
  <div class="seat">Seat Number 2
   <input type="checkbox" name="seats[]" value="__ticket_id__4">
  </div>
  <div class="seat">Seat Number 3
   <input type="checkbox" name="seats[]" value="__ticket_id__3">
  </div>
  <div class="seat">Seat Number 4
   <input type="checkbox" name="seats[]" value="__ticket_id__2">
  </div>
</div>
<input type="submit" value='send' name="test">
</form>

sleect seat 1,2 and 3

result print_r $_POST

Submit form with selected concert seats with JavaScript and HTML

2 Answers2