set form item value with javascript

B

Brian D

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
 
R

RobG

Brian said:
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?
Click to expand...

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>
Click to expand...

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
Click to expand...


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

Brian D

Rob,

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

Brian
 
A

ASM

RobG said:
<script type="text/javascript">
function submitForm( i ) {
var f = i.parentNode;
Click to expand...

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

<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;">
Click to expand...

to be compatible with forms tree :
<script type="text/javascript">
function submitForm( i ) { document.forms.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"

It is also not very accessible for text or non-visual browsers.
Click to expand...
</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;height: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;height:20px"
title="Click to submit" value=" ">
this last one doesn't show background image in Safari
 
R

RobG

ASM said:
and if browser doesn't speak JS DOM ? ?
why not use forms tree ?
Click to expand...

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.
<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;">
Click to expand...


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

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


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>

I thought squizzed link was bad way to do ?
Click to expand...

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')">
Click to expand...

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;height:20px"
title="Click to submit" onclick="this.form.submit()">
Click to expand...

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;height:20px"
title="Click to submit" value=" ">
this last one doesn't show background image in Safari
Click to expand...

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

Randy Webb

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.
Click to expand...

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

ASM

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'?
Click to expand...

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.
Click to expand...

OK ... nevertheless ...
the OP wanted the name of the image that was clicked on to be
put into the form before sending it.
Click to expand...

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

Richard Cornford

ASM wrote:
<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">
Click to expand...

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

ASM

Richard said:
ASM wrote:



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.
Click to expand...

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.
Click to expand...

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

RobG

Randy said:
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.
Click to expand...


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)
Click to expand...

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.
Click to expand...

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

Lasse Reichstein Nielsen

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

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.
Click to expand...

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 src="a.gif" title="Confirm form property"
onclick="alert( 'Have form property? ' + !!this.form );">
Click to expand...

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
 
B

Brian D

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
HTML form to csv file on server 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Issue with passing fetched data to POST form. How can I? 0
Bootstrap contact form not working 2
Php modal form to email 1
Set value after clicking in field 11
Registration Form 7

Members online

Total: 99 (members: 2, guests: 97)
Robots: 157

Forum statistics

Threads
474,270
Messages
2,571,102
Members
48,773
Latest member
Kaybee

Latest Threads

Top