Html selects last variable option - html

Question

im very new to html and am making a basic rock paper scissor page where you can select the image to choose your action. My issue is that it always selects the last option in the html.
<form action="/result <%#choice = "rock"%>">
<div id="rock_button" class="slideRight">
<input type="image" src="http://i.imgur.com/XT41ZXk.jpg" alt="Rock";>
</div>
</form>
<form action="/result <%#choice = "paper"%>">
<div id="paper_button" class="slideUp">
<input type="image" src="http://i.imgur.com/r1GckhD.jpg" alt="Paper";>
</div>
</form>
<form action="/result <%#choice = "scissors"%>">
<div id="scissors_button" class="slideLeft">
<input type="image" src="http://i.imgur.com/ttUlD5y.jpg" alt="Scissors";>
</div>
</form>
So from the above code, #choice is always set to "scissors". regardless of which picture is clicked on. ive tried putting onclick="<%#choice = "paper"%>" within th input, without any luck and creating one large form for all three picures but nothing has worked. Thanks for any help provided.

Answer 1

The choice variable is only used within the current page: Before any of the images is even clicked.
Use one form. Use buttons. Give them a name and a value. Read the form data in the server side program that acts as your form handler.
<form action="/result">
<button id="rock_button" class="slideRight" name="choice" value="rock">
<img src="http://i.imgur.com/XT41ZXk.jpg" alt="Rock">
</button>
<button id="paper_button" class="slideUp" name="choice" value="paper">
<img src="http://i.imgur.com/r1GckhD.jpg" alt="Paper">
</button>
<button id="scissors_button" class="slideLeft" name="choice" value="scissors">
<img src="http://i.imgur.com/ttUlD5y.jpg" alt="Scissors">
</button>
</form>
Then, in the program that handles the /result URL, you would do something along the lines of:
my $choice = $c->request->params->{choice};
The specifics depending on your choice of server side language.