提交选择并转到下一页答案

【问题标题】：Submit selection to and go to the next page提交选择并转到下一页
【发布时间】：2013-05-01 15:21:54
【问题描述】：

我目前正在尝试让用户选择他们想要使用的图标，一旦选择了就转到下一页，我将获得该发布的价值。这就是我为用户可以选择的选项所拥有的......在该代码下方我有另一个页面的其他代码。

<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;}

有人有什么建议吗？

【问题讨论】：

嗯，因为您要求的是建议而不是代码。我建议你把每张图片都变成一个超链接，当然这会将它从一个 POST 变成一个 GET 但这看起来不像是需要隐藏的信息。也更容易实现。
我想我可以把它变成一个链接，比如
Dogs

【解决方案1】：

将每个图像转换为一个表单作为“发送”按钮，然后为每个表单添加一个隐藏字段，其中包含字段名称。检查this SO question for more info in input type = "image"。

类似的东西。虽然我建议使用 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

最后但同样重要的是，出于显而易见的原因（页面重量和保持代码干燥），我建议将其放入您的 style.css 以将输入图像格式化为 128x128 像素：

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

【讨论】：