-1

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

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

有没有人有什么建议？

4

2 回答 2

0

将每个图像转换为一个表单作为“发送”按钮，然后为每个表单添加一个隐藏字段，其中包含字段名称。检查这个 SO question 以获取更多信息 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;
  }
于 2013-05-01T15:48:50.637 回答
0

标记上的表单按钮无论如何都不会与相应的表格选项相关联，尽管它们位于同一页面上。我会考虑根据单击的按钮的值从数据库表中提取值。

您需要在每种情况下将值从“提交”更改为适当的数组，例如（'pen' 或 'xmas'）。然后在您的后续页面上，使用 Where 子句从数据库表中提取您需要的值和传入的按钮的值（假设您使用的是 db），或者只是在接收页面上加载适当的数组。

于 2013-05-01T15:49:23.700 回答