Submit selection to and go to the next page

Question

I'm currently trying to have the users pick which Icons they want to use and once that is selected go to the next page which I will get that posted value. This is what I have for the options the user can choose... Below that code I have the other code for the other page.

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

Next page...

its located as /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;}

Does anyone have any suggestions?

Hmm, since you're asking for suggestions and not code. I suggest that you turn each image into a hyperlink, granted this will turn it from a POST to a GET but this doesn't seem like information that needs to be hidden. Also it would be easier to implement. — Useless Intern, May 01 '13 at 15:39

score 0 · Accepted Answer · edited May 23 '17 at 11:49

Turn each image into a form as the 'send' button and then a hidden field for each form with the name of the field. Check this SO question for more info in input type = "image".

Something like this. Although I'd recommend to autogenerate these forms with PHP, but that might be a bit tricky for beginners:

<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">

Then, in the index.php, you would do:

// 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

Last but not least, for obvious reasons (page weight and keeping your code DRY) I recommend to put this in your style.css to format your input images to 128x128 pixels:

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

score 0 · Answer 2 · answered May 01 '13 at 15:49

The form buttons on your markup are not associated in anyway with the corresponding table options albeit they are on the same page. I would consider having the values pulled from a database table based on the value of the button clicked.

You would need to change the values from "Submit" in each case to the appropriate array e.g. ('pen' or 'xmas'). Then on your subsequent page, pull the values you need from a database table using a Where clause and the value for the button passed in (this assumes you're using a db) or just load the appropriate array on the receiving page.

Submit selection to and go to the next page

2 Answers2