I have a <form> but I don't want to use the same old borning <input
type="text" or "radio" or "button">.

What I would like to do is use JavaScript with objects as my buttons.
Like a image, or in this case, a letter.
Example:
(The following form is meant to submit a letter choice to the action
page. In the end, the action page needs a variable named
"letter_choice" that contains any letter A-Z)

<form name="alphabetical" method="post" action="actionpage.cfm">

<a href="javascript:alpha_search('a');">A</a>
<a href="javascript:alpha_search('b');">B</a>
<a href="javascript:alpha_search('c');">C</a>

</form>
Being new to JavaScript, I am stuck here. I have created a function
named 'alpha_search' that looks like such:

function alpha_search(letters)
{ 
document.alphabetical.submit(letter);
}

In conclusion:
How would I get this form to submit the letter 'A' to the action page,
without using the ugly form buttons.

Hello Steven

You were very nearly there!  The code below shows you how to do what
you were trying to achieve.

Basically there are two items missing from your original script:

1) You need to place a hidden <input> type on your form.  This will
not show up on your form but will give you somewhere to place the
letter value you click on when you submit the form.

2) In the alpha_search function you need to tell the hidden <input>
tag its value before submitting the form.

The code should be this:

<script language="JavaScript" type="text/JavaScript">
function alpha_search(letters)
{
document.alphabetical.letter.value = letters; 
document.alphabetical.submit();
}
</script>

<form name="alphabetical" method="post" action="actionpage.cfm">
<input type="hidden" name="letter" />
<a href="javascript:alpha_search('a');">A</a>
<a href="javascript:alpha_search('b');">B</a>
<a href="javascript:alpha_search('c');">C</a>
</form>

If you have any questions on this please ask for clarification and I
will do my best to help.

---

Clarification of Answer by palitoy-ga on 14 Jul 2004 08:16 PDT

Thanks for the 5-star rating and tip they are both appreciated.

I have always found these Javascript resources of help when trying to
debug or learn something new:

http://www.w3schools.com/js/default.asp
http://www.javascript.com/
http://javascriptkit.com/
http://javascript.internet.com/
http://www.webdeveloper.com/javascript/

They are normally a good starting point for finding or learning about
some new technique, I hope they are as useful to you as they have been
to me in the past.

Thanks for the help.  You answered this just as I was asking it.  I
could use more JavaScript help.  If you have any resources that may
assist me in that endevor, please commment.

You don't really need a form for that. You can just do:

<a href="action.php?letter=a">a</a>
<a href="action.php?letter=b">b</a>
<a href="action.php?letter=c">c</a>

With PHP you could get the variable using $letter if register_globals
is off. If it's on (which is it by default now for security) you can
use $_GET['letter']

This method doesn't use JavaScript so it can be used by a larger
number of users because some people don't have a javascript enabled
browser or have turned it off. You can also place images inside the
link tags and let the user click an image to select the option. It
also works better for bookmarking the page.

You can also use a select input without any submit buttons like this:

<form name="alphabetical2" method="post" action="action.php">
<select name="letter" OnChange="document.alphabetical2.submit();">
<option value="" selected>Select a Letter:</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</form>

With PHP you would use $letter if register_globals is off and
$_POST['letter'] if it's on.

You don't have to stay with the ugly buttons. You can apply some
styles to make them look nice. Like this:

<input type="button" value="Submit Form!" style="border: 1px dashed
black; font: normal 10px verdana;">

Or if you wanted more control:

<input type="button" value="Submit Form!" style="border: 2px dotted
red; background: green; color: yellow; font: bold 20px trebuchet ms,
trebuchet; padding: 12px;">

These are just examples that I assume you would modify. They aren't
meant to look pretty :)

icey.