Form with 2 pic gallery as radio? and submit button

[ProjectedSurplus]

I'm looking to build a form (as in the code below) which will allow the user to TWICE select an image from a database derived photo gallery (ideally a list of thumbnails with a mouseover enlarge) and then submit along with an email address. However, it seems that <input type="image" > submits the form immediately upon click. Suggestions on how to handle appreciated :)

------------------------------------------------------------------------

<form name="form1" id="form1" method="post" action="">

1.) Pick one from the following list of pictures:<br />
<input type="image" > <input type="image" > <input type="image" > <br />

2.) Pick one from the following list of pictures:<br />
<input type="image" > <input type="image" > <input type="image" > <br />

3.) Enter email for confirmation:<br />
<input type="text" name="Email" id="Email"> <input type="submit" >

</form>

[Dan_Bracuk]

Use an img tag to display the image. Use a radio button to allow the user to select it.

[ProjectedSurplus]

Thanks but is there any way to do this without the radio button?

[fober1]

Hi,
It's not going to work with the <input type="image"> tag. This is really a submit-button with an image instead of a button.

Radio-buttons are one option. But a user could only select one image from a group, so if they are supposed to select two images, you would have to show all images twice.
The better option would be to use checkbox fields, and have a javascript function that verifies that only two images are selected.

An option that avoids the radio or checkbox inputs is to have a javascript onlick function for each image that enters the name of the image into a (or one of) hidden text field(s).

I would go with the checkboxes, and if necessary you could hide the actual checkboxes with CSS by making them invisible or hidding them behind the image.

cheers,
fober