[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