469,604 Members | 2,376 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,604 developers. It's quick & easy.

set form item value with javascript

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?

<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>

<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

Jul 26 '05 #1
11 2748
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
Jul 26 '05 #2
Rob,

Thanks. That worked. If doing this via javascript is bad, how whould
I do it otherwise?

Brian

Jul 27 '05 #3
ASM
RobG wrote:
<script type="text/javascript">
function submitForm( i ) {
var f = i.parentNode;
and if browser doesn't speak JS DOM ? ?
why not use forms tree ?

<ziuup>
<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;">
to be compatible with forms tree :
<script type="text/javascript">
function submitForm( i ) { document.forms[i].submit(); }
</script>
onclick="submitForm('form1');return false;">

and/or no need to explain which parent you talk about
onclick="document.forms['form1'].submit();"

and that :
alt="Click to submit" very beurk ! and bad IE way of use

alt="Submit button" title="Click to submit"

<cite> It is also not very accessible for text or non-visual browsers.

</cite>

I thought squizzed link was bad way to do ?
so with no link
<img name="image1" src="image1.gif" alt="Submit button"
title="Click to submit" onclick="submitForm('form1')">
or with a button
<input type="button" name="image1"
style="background:url(image1.gif);width:100px;heig ht:20px"
title="Click to submit" onclick="this.form.submit()">
or (why not to use what is made for) a submit button :
<input type="submit" name="image1"
style="background:url(image1.gif);width:100px;heig ht:20px"
title="Click to submit" value=" ">
this last one doesn't show background image in Safari
--
Stephane Moriaux et son [moins] vieux Mac
Jul 27 '05 #4
ASM wrote:
RobG wrote:
<script type="text/javascript">
function submitForm( i ) {
var f = i.parentNode;

and if browser doesn't speak JS DOM ? ?
why not use forms tree ?


How many browsers that support the forms collection don't support
'parentNode'? The idea was to not hard-code the form name in the script.

<ziuup>
<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;">

to be compatible with forms tree :
<script type="text/javascript">
function submitForm( i ) { document.forms[i].submit(); }
</script>
onclick="submitForm('form1');return false;">

and/or no need to explain which parent you talk about
onclick="document.forms['form1'].submit();"


Because the OP wanted the name of the image that was clicked on to be
put into the form before sending it. Yes, there's a thousand ways to
skin a cat.

and that :
alt="Click to submit" very beurk ! and bad IE way of use

alt="Submit button" title="Click to submit"

<cite>
> It is also not very accessible for text or non-visual browsers. </cite>

I thought squizzed link was bad way to do ?


I have no idea what you mean by 'squizzed link', but the idea is that
if the user doesn't have JS available, a click on the image, which
will seem to be a link, should still do something useful. I explained
that.
so with no link
<img name="image1" src="image1.gif" alt="Submit button"
title="Click to submit" onclick="submitForm('form1')">
Which is totally useless without JavaScript and does not do what the
OP requested.
or with a button
<input type="button" name="image1"
style="background:url(image1.gif);width:100px;heig ht:20px"
title="Click to submit" onclick="this.form.submit()">
As above.
or (why not to use what is made for) a submit button :
<input type="submit" name="image1"
style="background:url(image1.gif);width:100px;heig ht:20px"
title="Click to submit" value=" ">
this last one doesn't show background image in Safari


Perhaps the inconsistency of support for buttons with background
images (or button elements with images) is a good reason not to use them?

--
Rob
Jul 27 '05 #5
RobG said the following on 7/27/2005 10:55 AM:
ASM wrote:
RobG wrote:
<script type="text/javascript">
function submitForm( i ) {
var f = i.parentNode;


and if browser doesn't speak JS DOM ? ?
why not use forms tree ?

How many browsers that support the forms collection don't support
'parentNode'? The idea was to not hard-code the form name in the script.


An easier question to answer is "What browser doesn't support the forms
collection?" and the answer is typically none as most browsers do. But
if you want to use parentNode, then you should check for it before using
it (even though that is true with .forms)

There is also no need to hard-code the form name. The form itself is a
property of all the elements in the form so it can be gained from the
form control itself. Shocked me to learn that a while back but it is true.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 27 '05 #6
ASM
RobG wrote:
ASM wrote:
RobG wrote:

OK,

My reaction did come mostly about accessibility (the alt) wont you speak
in your 2 1st comments to, finaly, propose a DOM function and DOM only.
How many browsers that support the forms collection don't support
'parentNode'?
Sorry ?
dindn't you want to say :
how many that support DOM don't support Javascript (1.2)
I hope it is
The idea was to not hard-code the form name in the script.
OK ... nevertheless ...
the OP wanted the name of the image that was clicked on to be
put into the form before sending it.


That's right and I didn't answer to this point
so, with your example :

<a href="image3clickedOn.html"><img name="image3" src="image3.gif"
alt="Submit button" title="Click to submit"
onclick="imageClickedOn.value=this.name;return false;">
<input type="hidden" name="imageClickedOn" value="none">


--
Stephane Moriaux et son [moins] vieux Mac
Jul 27 '05 #7
ASM wrote:
<snip>
<a href="image3clickedOn.html"><img name="image3" src="image3.gif"
alt="Submit button" title="Click to submit"
onclick="imageClickedOn.value=this.name;return false;">
<input type="hidden" name="imageClickedOn" value="none">


Relying on the browser providing internally generated intrinsic event
handling functions with an augmented scope chain is risky in any
circumstances. Making that assumption about handlers on IMG elements is
particularly risky.

But this whole question is probably best addressed with <input
type="image"> and getting rid of the scripting entirly.

Richard.
Jul 27 '05 #8
ASM
Richard Cornford wrote:
ASM wrote:
<snip>
<a href="image3clickedOn.html"><img name="image3" src="image3.gif"
alt="Submit button" title="Click to submit"
onclick="imageClickedOn.value=this.name;return false;">
<input type="hidden" name="imageClickedOn" value="none">

Relying on the browser providing internally generated intrinsic event
handling functions with an augmented scope chain is risky in any
circumstances. Making that assumption about handlers on IMG elements is
particularly risky.


I didn't test it, but reading following,
I notice I did confuse and surely that will not work
this onclick is only for forms elements
But this whole question is probably best addressed with <input
type="image"> and getting rid of the scripting entirly.


So : how to do without DOM and with a link available if JS disabled ?

--
Stephane Moriaux et son [moins] vieux Mac
Jul 27 '05 #9
Randy Webb wrote:
RobG said the following on 7/27/2005 10:55 AM:
[...]

How many browsers that support the forms collection don't support
'parentNode'? The idea was to not hard-code the form name in the script.

An easier question to answer is "What browser doesn't support the forms
collection?" and the answer is typically none as most browsers do. But
if you want to use parentNode, then you should check for it before using
it (even though that is true with .forms)


Fair enough, but I figured using parentNode was the best way to find the
form that the image was in (see below).

There is also no need to hard-code the form name. The form itself is a
property of all the elements in the form so it can be gained from the
form control itself. Shocked me to learn that a while back but it is true.


Only form controls have a 'form' property that refers to the form they
are in (if they're in one). 'img' elements inside a form do not have a
form property.
<form name="formA" action="">
<p>
<img src="a.gif" title="Confirm form property"
onclick="alert( 'Have form property? ' + !!this.form );">
<input type="button" value="Confirm form property"
onclick="alert( 'Have form property? ' + !!this.form );">
</p>
</form>
<input type="button" value="Confirm form property"
onclick="alert( 'Have form property? ' + !!this.form );">

I probably should have suggested <input type="image" ... > but
accessibility issues have caused them to be so rarely used that I
ignored them - even though they are appropriate here.
--
Rob
Jul 28 '05 #10
RobG <rg***@iinet.net.auau> writes:
Fair enough, but I figured using parentNode was the best way to find
the form that the image was in (see below).
Technically, the img element can be embedded in a form element, but
at a more conceptual level, an image is not a member of a form, and
it's an accident of implementation that the grouping of form controls
into a form is done by wrapping in an form element in HTML.
Only form controls have a 'form' property that refers to the form they
are in (if they're in one). 'img' elements inside a form do not have
a form property.
Because they don't *belong* to a form, they are merely declared inside
the form element.

If you want to refer to a form from an image, make the reference
explicit to the name of the form, e.g.,
<img ... onclick="...document.forms['thatForm']...">
<img src="a.gif" title="Confirm form property"
onclick="alert( 'Have form property? ' + !!this.form );">


If you want something to click, use a button, e.g.,
<button type="button" onclick="...">
<img src="a.gif" title="Confirm form property">
</button>

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 28 '05 #11
Wow! Thanks everyone.

Unfortunately I got a little lost with some of these responses. I was
able to follow RobG's first post and it did work for me. I probably
should have mentioned this in my first post but I am using a javascript
in the page to preload some images for onmouse events. So I guess I am
already depending on javascript running in th browser.

I thought of using <input type="image"> but could not get it to work.
So right now I am at the point where I am using RobG's first example
b/c the rest of it kind of confused me.

Brian

Jul 28 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

25 posts views Thread by Neo Geshel | last post: by
7 posts views Thread by webmaster | last post: by
reply views Thread by devrayhaan | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.