php - 選択を送信して次のページに進む

Question

私は現在、ユーザーに使用したいアイコンを選択させようとしています。それが選択されると、投稿された値を取得する次のページに移動します。これは、ユーザーが選択できるオプションのために私が持っているものです...そのコードの下に、他のページの他のコードがあります。

<div id="accordion">
  <h3><input type="submit" name="dog" value="Select" />Dogs</h3>
  <div>
<table width="100%" border="0">
  <tr>
    <td><img src="dog/128_dog3.png" width="128" height="128" alt=""></td>
    <td><img src="dog/dog (1).png" width="128" height="128" alt=""></td>
    <td><img src="dog/dog (2).png" width="128" height="128" alt=""></td>
    <td><img src="dog/dog.png" width="128" height="128" alt=""></td>
    <td><img src="dog/dog1.png" width="128" height="128" alt=""></td>
  </tr>
  <tr>
    <td><img src="dog/hp_dog.png" width="128" height="128" alt=""></td>
    <td><img src="dog/ps_sirius_dog_black.png" width="128" height="128" alt=""></td>
    <td><img src="dog/ps_sirius_dog_blue.png" width="128" height="128" alt=""></td>
    <td><img src="dog/sleeping_old_dog.png" width="128" height="128" alt=""></td>
  </tr>
</table>

  </div>
  <h3><input type="submit" name="cat" value="Select" />Cats</h3>
  <div>
    <table width="100%" border="0">
  <tr>
    <td><img src="cat/cat (1).png" width="128" height="128" alt=""></td>
    <td><img src="cat/cat (2).png" width="128" height="128" alt=""></td>
    <td><img src="cat/cat (3).png" width="128" height="128" alt=""></td>
    <td><img src="cat/cat (4).png" width="128" height="128" alt=""></td>
    <td><img src="cat/cat (5).png" width="128" height="128" alt=""></td>
  </tr>
  <tr>
    <td><img src="cat/cat (6).png" width="128" height="128" alt=""></td>
    <td><img src="cat/cat.png" width="128" height="128" alt=""></td>
    <td><img src="cat/cat_2.png" width="128" height="128" alt=""></td>
    <td><img src="cat/cat_6_2.png" width="128" height="128" alt=""></td>
    <td><img src="cat/hp_cat.png" width="128" height="128" alt=""></td>
  </tr>
  <tr>
    <td><img src="cat/package_toys.png" width="128" height="128" alt=""></td>
  </tr>
</table>

  </div>
  <h3><input type="submit" name="fish" value="Select" />Fish</h3>
  <div>
<table width="100%" border="0">
  <tr>
    <td><img src="fish/1_fish.png" width="128" height="128" alt=""></td>
    <td><img src="fish/2_fish.png" width="128" height="128" alt=""></td>
    <td><img src="fish/aqua_3.png" width="128" height="128" alt=""></td>
    <td><img src="fish/findingnemo1.png" width="128" height="128" alt=""></td>
    <td><img src="fish/findingnemo2.png" width="128" height="128" alt=""></td>
  </tr>
  <tr>
    <td><img src="fish/findingnemo3.png" width="128" height="128" alt=""></td>
    <td><img src="fish/findingnemo4.png" width="128" height="128" alt=""></td>
    <td><img src="fish/findingnemo5.png" width="128" height="128" alt=""></td>
    <td><img src="fish/fish (2).png" width="128" height="128" alt=""></td>
    <td><img src="fish/fish.png" width="128" height="128" alt=""></td>
  </tr>
  <tr>
    <td><img src="fish/fish2.png" width="128" height="128" alt=""></td>
    <td><img src="fish/gnome_fish.png" width="128" height="128" alt=""></td>
    <td><img src="fish/jelly_fish.png" width="128" height="128" alt=""></td>
    <td><img src="fish/wireshark.png" width="128" height="128" alt=""></td>
  </tr>
</table>

  </div>
  <h3><input type="button" name="zoo" value="Select" />Zoo</h3>
  <div>
<table width="100%" border="0">
  <tr>
    <td><img src="zoo/big_foot.png" width="128" height="128" alt=""></td>
    <td><img src="zoo/dolphin.png" width="128" height="128" alt=""></td>
    <td><img src="zoo/frank.png" width="128" height="128" alt=""></td>
    <td><img src="zoo/hippopotamus.png" width="128" height="128" alt=""></td>
    <td><img src="zoo/ksnake.png" width="128" height="128" alt=""></td>
  </tr>
  <tr>
    <td><img src="zoo/mammoth_seated.png" width="128" height="128" alt=""></td>
    <td><img src="zoo/panda.png" width="128" height="128" alt=""></td>
    <td><img src="zoo/penguin (1).png" width="128" height="128" alt=""></td>
    <td><img src="zoo/penguin.png" width="128" height="128" alt=""></td>
  </tr>
</table>

  </div>
  <h3><input type="button" name="xmas" value="Select" />Xmas</h3>
  <div>
<table width="100%" border="0">
  <tr>
    <td><img src="xmas/ball_red_1.png" width="128" height="128" alt=""></td>
    <td><img src="xmas/candycane.png" width="128" height="128" alt=""></td>
    <td><img src="xmas/christmas_santa_christmas_2.png" width="104" height="131" alt=""></td>
    <td><img src="xmas/christmas_tree.png" width="128" height="128" alt=""></td>
    <td><img src="xmas/gift.png" width="128" height="128" alt=""></td>
  </tr>
  <tr>
    <td><img src="xmas/golden_ball.png" width="128" height="128" alt=""></td>
    <td><img src="xmas/jingle.png" width="128" height="128" alt=""></td>
    <td><img src="xmas/mistletoe.png" width="128" height="128" alt=""></td>
    <td><img src="xmas/present.png" width="128" height="128" alt=""></td>
    <td><img src="xmas/recycle_bin_full.png" width="128" height="128" alt=""></td>
  </tr>
  <tr>
    <td><img src="xmas/snowman2.png" width="96" height="96" alt=""></td>
    <td><img src="xmas/xmas_08.png" width="128" height="128" alt=""></td>
    <td><img src="xmas/xmas_09.png" width="128" height="128" alt=""></td>
    <td><img src="xmas/xmas_14.png" width="128" height="128" alt=""></td>
    <td><img src="xmas/xmas_17.png" width="128" height="128" alt=""></td>
  </tr>
</table>

  </div>
    <h3><input type="button" name="pen" value="Select" />Pengins</h3>
  <div>
<table width="100%" border="0">
  <tr>
    <td><img src="pengins/angola.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/argentina.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/brazil.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/croatia.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/ecuador.png" width="128" height="128" alt=""></td>
  </tr>
  <tr>
    <td><img src="pengins/england.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/france.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/iran.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/italy.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/japan.png" width="128" height="128" alt=""></td>
  </tr>
  <tr>
    <td><img src="pengins/korea_republic.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/mexico.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/saudi_arabia.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/serbia_montenegro.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/spain.png" width="128" height="128" alt=""></td>
  </tr>
  <tr>
    <td><img src="pengins/sweden.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/switzerland.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/tunisia.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/ukraine.png" width="128" height="128" alt=""></td>
    <td><img src="pengins/usa.png" width="128" height="128" alt=""></td>
  </tr>
</table>

  </div>
</div>

次のページ...

/index.php にあります

if ($_POST['dog']){ $currentArr = $dogArr;}
elseif($_POST['fish']){ $currentArr = $fishArr;}
elseif($_POST['cat']){ $currentArr = $catArr;}
elseif($_POST['zoo']){ $currentArr = $zooArr;}
elseif($_POST['xmas']){ $currentArr = $xmasArr;}
elseif($_POST['penguin']){ $currentArr = $penginArr;}

誰か提案はありますか？

score 0 · Accepted Answer

マークアップのフォームボタンは、同じページにあるにもかかわらず、対応するテーブルオプションに関連付けられていません。クリックされたボタンの値に基づいて、データベーステーブルから値を取得することを検討します。

それぞれの場合の値を「Submit」から適切な配列 (「pen」または「xmas」など) に変更する必要があります。次に、後続のページで、 Where 句と渡されたボタンの値を使用してデータベーステーブルから必要な値を取得するか (これは db を使用していると仮定します)、受信ページに適切な配列をロードするだけです。

score 0 · Accepted Answer

各画像を「送信」ボタンとしてフォームに変換し、次にフィールドの名前を持つ各フォームの非表示フィールドに変換します。input type = "image" の詳細については、この SO の質問を確認してください。

このようなもの。これらのフォームは PHP で自動生成することをお勧めしますが、初心者には少し難しいかもしれません。

<div id = "animals">
  <!-- First animal -->
  <form action = "/index.php" method = "POST">
    <input type = "hidden" name = "type" value = "dog"><br>
    <input type = "hidden" name = "specific" value = "128_dog3"><br>
    <input type = "image" src = "dog/128_dog3.png"/>
  </form>
  <!-- Second animal -->
  <form action = "/index.php" method = "POST">
    <input type = "hidden" name = "type" value = "dog"><br>
    <input type = "hidden" name = "specific" value = "dog (1)"><br>
    <input type = "image" src = "dog/dog (1)png"/>
  </form>
<div id = "animals">

次に、index.php で次のようにします。

// If to avoid someone submitting empty forms
if (!empty($_POST['type']) && !empty($_POST['specific']))
  switch($_POST['type'])
    {
    case 'dog': $currentArr = $dogArr; break;
    case 'fish': $currentArr = $fishArr; break;
    case 'cat': $currentArr = $catArr; break;
    case 'zoo': $currentArr = $zooArr; break;
    default: echo "Sorry, select one of the icons available"; break;
    }
  // Now $currentArr holds the specie (dog, fish, penguin, etc) and $_POST['specific'] the race

最後になりましたが、明らかな理由 (ページの重量とコードを DRY に保つため) から、これを style.css に入れて、入力画像を 128x128 ピクセルにフォーマットすることをお勧めします。

#animals form input
  {
  width: 128px;
  height: 128px;
  }

php - 選択を送信して次のページに進む

2 に答える 2

Related

Reference