[thelist] input type="image" vs. input type="button"

Phil Turmel philip at turmel.org
Thu Aug 24 14:50:20 CDT 2006


jono at charlestonwebsolutions.com wrote:
> I need a new approach to a select menu for web site navigation that uses
> an image (input type="image") instead of a "go" or "submit" button (input
> type="button").

[snip /]

> <form name="quickform">
> 	<label for="quickpicks">Select a topic:</label>
> 	<select name="quickpicks">
> 		<option value="selected">Tell me more about...</option>
> 		<option value="product1.php">Product One</option>
> 		<option value="product2.php">Product Two</option>
> 		<option value="product3.php">Product Three</option>
> 		<option value="product4.php">Product Four</option>
> 		<option value="product5.php">Product Five</option>
> 	</select>
> 	<input type="button"
> onClick="location=document.quickform.quickpicks.options[document.quickform.quickpicks.selectedIndex].value;"
> value="GO" />
> </form>
> 
> This works just fine, but relies on JavaScript and does not use an image
> for the button - two things I want to change.  I am open to anything, but
> prefer accessible, non-JavaScript dependant, and a PHP solution if
> possible.  Eventually the menu will get its <option>s from a database -
> PHP/MySQL - but I am still in the process of becoming a Programmer.
> 

It seems to me you are trying to solve a problem that won't exist once 
you use a database for your products.  That is, once your link looks 
like this...

http://example.com/product.php?productid=1

... your problem goes away.  Your html ends up like this:

<form name="quickform" action="product.php" method="GET">
	<label for="quickpicks">Select a topic:</label>
	<select id="quickpicks" name="productid">
		<option value="selected">Tell me more about...</option>
		<option value="1">Product One</option>
		<option value="2">Product Two</option>
		<option value="3">Product Three</option>
		<option value="4">Product Four</option>
		<option value="5">Product Five</option>
	</select>
	<input type="image" src="..." alt="GO">
</form>

This solution uses no javascript, allows the graphic on the submit 
button, and puts the product id into a php variable for your database 
logic: $_GET['productid'].

HTH,

Phil

ps. also fixed the missing id on the select.  id != name.



More information about the thelist mailing list