Brian D wrote:
I have been searching for a while to find an answer to this and I must
be searching on the wrong keywords.
Below is a snippet of my form. There are other form items on it, but I
need to submit a different value based on the image that is clicked.
Lets say the name is "image" and the value is [1,2,3].
How do I submit this with javascript?
Using JavaScript to submit a form is considered bad practice. It makes
the form totally usless to anyone with JavaScript disabled or not
available. It is also not very accessible for text or non-visual browsers.
<form name="form1" method="post" action="launch.asp">
<A HREF="javascript: void();" ONCLICK="document.form1.submit(); return
false;"><IMG NAME="image1" SRC="image1.jpg"></A>
The A element should have an href attribute that does something useful -
like linking to a page that does whatever would have happened had the
user had JavaScript available. If this is for an intranet and you don't
intend doing that, remove the A element, put the onclick on the image
and use CSS to make the cursor a pointer when it's over the image:
cursor: pointer;
The general rule is that your pages should work without JavaScript.
Scripting can be added to make life easier for those who have it and
should never result in an inaccessible interface.
<A HREF="javascript: void();" ONCLICK="document.form1.submit(); return
false;"><IMG NAME="image2" SRC="image2.jpg"></A>
<A HREF="javascript: void();" ONCLICK="document.form1.submit(); return
false;"><IMG NAME="image3" SRC="image3.jpg"></A>
</form>
Thanks,
Brian
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<meta name="generator" content="editplus">
<style type="text/css">
/* Needed if A element removed from form1 */
#form1 img { cursor: pointer; }
</style>
<script type="text/javascript">
function submitForm( i ) {
var f = i.parentNode;
while ( f.parentNode && 'form' != f.nodeName.toLowerCase() ){
f = f.parentNode;
}
f.elements['imageClickedOn'].value = i.name;
f.submit();
}
</script>
</head>
<body>
<form name="form1" action="" id="form1">
<a href="image1clickedOn.html"><img name="image1" src="image1.gif"
alt="Click to submit" onclick="submitForm(this);return false;">
<a href="image2clickedOn.html"><img name="image2" src="image2.gif"
alt="Click to submit" onclick="submitForm(this);return false;">
<a href="image3clickedOn.html"><img name="image3" src="image3.gif"
alt="Click to submit" onclick="submitForm(this);return false;">
<input type="hidden" name="imageClickedOn" value="none">
</form>
</form>
</body>
</html>
--
Rob
