前提・実現したいこと
私は、webページ上で簡易的な座席予約システムを作成したいと考えています。
作成にあたり、
座席に見立てたボタンの配列の中で、希望の座席(ボタン)を選択し、決定ボタンを押すことで、リンク先のページで選択された座席(ボタン)の名前を確認できるようなプログラムは作成することができました。
そこで、今回は選択された座席のデータを次のページに飛ばすのではなく、Cookie(データベース)に保存して、確認ページでCookieからそのデータを呼び出す方法を教えていただければと思います。
よろしくお願いいたします。
最終的には蓄積されたデータをもとに、すでに選択された座席を選択不可にすることで、座席が重複した選択されてしまうことを防ぐプログラムを作成したいと考えています。
現状できている画面
1:座席選択ページで希望の座席を選ぶ
↓
2:選択された状態で確認ボタンを押す
↓
3:表示されたウィンドウのOKボタンを押し、リンク先のページで改めて選択された座席の番号を確認する。
というような感じです。
座席を選択した状態で確認ボタンを押すことでCookie(データベース)にデータを蓄積したいと考えています。
また、とりあえず、別ページ(確認ページ)で蓄積されたデータを呼び出し、確認できるようにしたいと考えています。
よろしくお願いいたします。
該当のソースコード
php
1<?php 2foreach(range("A","C") as $r){ 3 foreach(range(1,5) as $c){ 4 print "<input type='checkbox' name='c[]' id='c{$r}-{$c}' value='{$r}-{$c}'><input type='button' value='{$r}-{$c}' class='cx'>"; 5 } 6 print "<br>"; 7} 8 ?>
php
1<?PHP 2$c=filter_input(INPUT_GET,"c",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY); 3if(!is_nul![イメージ説明](342ec36d91231eebd24c2b2128705731.png){ 4 print "選択された座席:".implode(",",$c)."<br>"; 5 6} 7?>
css
1<style> 2[name="c[]"]{display:none;} 3[name="c[]"]:checked + .cx{background-Color:yellow;} 4</style>
javascript
1<script type="text/javascript"> 2 window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#f1').addEventListener('submit',function(e){ 4 var c=[].map.call(document.querySelectorAll('[name="c[]"]:checked'),function(x){ 5 return x.value; 6 }).join(","); 7 if(c===""){ 8 alert("座席を選択してください。"); 9 e.preventDefault(); 10 }else{ 11 if(!confirm(c+" が選択されています。よろしいですか?")){ 12 e.preventDefault(); 13 } 14 } 15 }); 16 [].forEach.call(document.querySelectorAll('.cx'),function(x){ 17 x.addEventListener('click',function(e){ 18 var t=e.target; 19 var n=document.querySelector('#c'+t.value); 20 n.checked=!n.checked; 21 }); 22 }); 23}); 24 </script>
html
1<input type="button" style="position: absolute; left: 35px; top: -5px; width: 250px; height: 35px; background-color: #ffffff; border-color: #000000" value="ステージ"><br><br><br>