239501 - BUTTON element outputs different values when using submit and button (with submit script) code

Status: RESOLVED EXPIRED

(Core :: DOM: Core & HTML, defect)

Description

[neil walker]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5a) Gecko/20030728 Mozilla Firebird/0.6.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5a) Gecko/20030728 Mozilla Firebird/0.6.1

Hello,
When I use BUTTON as a submit type it is different from when I use a BUTTON as a
button type but call submit() script:

<form method=get action="tmp.html">
<button type=submit name=buttona value="A" onclick="this.value='A1'">TEXTA</button>
<button type=submit name=buttona value="B" onclick="this.value='B1'">TEXTB</button>
<button type=submit name=buttonb value="C" onclick="this.value='C1'">TEXTC</button>
</form>

I get what I expected:
tmp.html?buttona=A1

However, when I change it to:
<form method=get action="tmp.html">
<button type=button name=buttona value="A"
onclick="this.value='A1';submit();">TEXTA</button>
<button type=button name=buttona value="B"
onclick="this.value='B1';submit();">TEXTB</button>
<button type=button name=buttonb value="C"
onclick="this.value='C1';submit();">TEXTC</button>
</form>

Mozilla seems to not do the same and I get nothing:
tmp.html?

Under other browsers I get different results but are consistent except Mozilla.
 Theres also a wider issue regard to how buttons are shown, I don't know if its
me or a different interpretation of the w3c guidelines (the wording 'value' is
an 'initial' value intrigues me as to is value only the initial state or a
current state?).  However the problems I've encountered are much deeper than this:

Using form BUTTON and INPUT it appears that mozilla and IE do completely the
opposite things which makes development quite hard!  However they are both
consistent when using INPUT buttons:

When I use a simple input form type:

<form method=get action="tmp.html">
	<input type=submit name=buttona value="Text A">
	<input type=submit name=buttona value="Text B">
	<input type=submit name=buttonb value="Text C">
</form>


Mozilla:
tmp.html?buttona=Text+A

IE:
tmp.html?buttona=Text+A

Which is how I'd expect it, however with BUTTON:

<form method=get action="tmp.html">
	<button type=submit name=buttona value="A">TEXTA</button>
	<button type=submit name=buttona value="B">TEXTB</button>
	<button type=submit name=buttonb value="C">TEXTC</button>
</form>

Produces under IE the following data when you click buttona:
tmp.html?buttona=TEXTA&buttona=TEXTB&buttonb=TEXTC

so clicking a button is sending the visual text and not value and is always
sending everything.

yet under Firebird/Mozilla when you click buttona:
tmp.html?buttona=A

I would have thought firebird was right here as otherwise how do you get the
value of the button?

So I changed it to include onclick="document.buttona.value='A'", etc:

<form method=get action="tmp.html">
<button type=submit name=buttona value="A" onclick="this.value='A1'">TEXTA</button>
<button type=submit name=buttona value="B" onclick="this.value='B1'">TEXTB</button>
<button type=submit name=buttonb value="C" onclick="this.value='C1'">TEXTC</button>
</form>

under IE exactly the same happens and the script has no effect:
buttona=A1&buttona=TEXTB&buttonb=TEXTC

under mozilla the value is changed:
tmp.html?buttona=A1

Although IE has got the right value, in code when you ask for the value of
buttona, e.g. in PHP $_REQUEST['buttona'] you get A1 from mozilla as that is all
that was sent, but under IE you get the last buttons value so you get 'TEXTB'

Unless I'm doing something fundamentally wrong with buttons theres something
going wrong.  Under IE 6 (early build) what is also happening is when you click
the button and the javascript kicks in the button changes its text as well to 'A1'!

However, its not all plain sailing blaming IE, as when you change it to a button
and manually submit:

<form method=get action="tmp.html">
	<button type=button name=buttona value="A"
onclick="this.value='A1';submit();">TEXTA</button>
	<button type=button name=buttona value="B"
onclick="this.value='B1';submit();">TEXTB</button>
	<button type=button name=buttonb value="C"
onclick="this.value='C1';submit();">TEXTC</button>
</form>

Mozilla seems to not do the same, i.e. instead of:
tmp.html?buttona=A1

you get nothing:
tmp.html?

but IE gives the same (but not quite right):
buttona=A1&buttona=TEXTB&buttonb=TEXTC

So the questions are:

1. should the submit function do the same and is Mozilla wrong?
2. should the displayed output be as Mozilla or IE?
3. am I misinterpreting everything?
4. how has anyone coped!

Like I said, using INPUT gives the correct reply for both browsers.  However I
want to use buttons for the richer rendering and support for images.  However
using INPUT type=image gives another headache:

<form method=get action="tmp.html">
<input type=image name=buttona value="Text A" src="c:\img.gif" onclick='submit()'>
<input type=image name=buttona value="Text B" src="c:\img.gif" onclick='submit()'>
<input type=image name=buttonb value="Text C" src="c:\img.gif" onclick='submit()'>
</form>

Under Mozilla you get something sensible:
tmp.html?buttona.x=4&buttona.y=15&buttona=Text+A

but under IE you don't get any value:
tmp.html?buttona.x=5&buttona.y=15

Because of all this I've had to rewrite my code endless times and the only
common solution to get buttons is to use buttons as submit type and give every
button a unique name.

Neil.

Reproducible: Always
Steps to Reproduce:
1. as details
2.
3.

Comment 1

[Mike Connor [:mconnor]]

Reporter, can you attach a reduced testcase? (just make it a simple HTML file
with the JS inline)

Comment 2

[neil walker]

<button type=submit name=buttona value="A" 
onclick="this.value='A1'">TEXTA</button>

is different to:
<button type=button name=buttona value="B"
onclick="this.value='B1';submit();">TEXTB</button>

in that the second approach does not set buttona to hold the value 'B'

Neil

Comment 3

[neil walker]

<button type=submit name=buttona value="A" 
onclick="this.value='A1'">TEXTA</button>

produes the value 'A' for buttona on submitting the form, but:

<button type=button name=buttona value="B"
onclick="this.value='B1';submit();">TEXTB</button>

produces nothing.

I'm not sure if this is a bug or not.  I think the w3c guidelines on form 
submissions and 'successful' submits, especially regarding controls with the 
same name is a bit vague to say the least.

The reason for the large submission was to show that IE interprets BUTTON 
elements completely differently to firebird and sends all values, not just the 
one clicked.

Neil

Comment 4

[Mike Connor [:mconnor]]

does onclick fire before or after the submit event?  (simple testcase:
<button name="foo" onclick="alert('onclick')" onsubmit="alert('onsubmit')" 
type=submit> )

if onclick fires after form submission (whether that's correct or not I haven't 
checked into) then the result makes sense.

Really, if you want changes made on submission, use onsubmit instead of 
onclick.  IE probably fires onclick before submission, and I don't know if 
that's right.

I'll have to play with this at home some more.

Comment 5

[neil walker]

as far as I can see there is no such event defined by w3c as onsubmit.

Comment 6

[neil walker]

Sorry, I was miles away.  Ignore the last comment about no onsubmit, I was
thinking of something else :)

I've been looking a bit more into this and I think the crux of the problem is
that MS are handling stuff not according the w3c guidelines, e.g. when you
submit a BUTTON they set an attribute 'innertext' and do not pass it through the
normal name/value pair as defined.  Why can't they just follow the guidelines
instead of making people code twice.

As for the submit() problem, I leave that open but I suspect it may be because
submit() is a generic function and therefore the submit is not attached to the
button that calls it in the onclick event I described?

Comment 7

[Mike Connor [:mconnor]]

I don't know if you can use submit() without specifying the form.  IE might let 
you do it, but IE lets you do a lot of things that shouldn't work. :)

document.formname.submit() should work in all browsers, but its been a while 
since I wrote anything for the web in JS :)

Comment 8

[José Jeria]

Actually, you dont need to change the value with Javascript, the original value
will not be passed anyway
<form method="get">
<button type="button" name="buttona" value="B"
onclick="this.form.submit();">TEXTB</button>
</form>

Comment 9

[José Jeria]

Dont know if this is a bug or not, IE passes the value, Opeara acts like Mozilla.

Seing this on suite trunk build as well, so updating component.

Comment 10

[Gervase Markham [:gerv]]

This is an automated message, with ID "auto-resolve01".

This bug has had no comments for a long time. Statistically, we have found that
bug reports that have not been confirmed by a second user after three months are
highly unlikely to be the source of a fix to the code.

While your input is very important to us, our resources are limited and so we
are asking for your help in focussing our efforts. If you can still reproduce
this problem in the latest version of the product (see below for how to obtain a
copy) or, for feature requests, if it's not present in the latest version and
you still believe we should implement it, please visit the URL of this bug
(given at the top of this mail) and add a comment to that effect, giving more
reproduction information if you have it.

If it is not a problem any longer, you need take no action. If this bug is not
changed in any way in the next two weeks, it will be automatically resolved.
Thank you for your help in this matter.

The latest beta releases can be obtained from:
Firefox:     http://www.mozilla.org/projects/firefox/
Thunderbird: http://www.mozilla.org/products/thunderbird/releases/1.5beta1.html
Seamonkey:   http://www.mozilla.org/projects/seamonkey/

Comment 11

[Gervase Markham [:gerv]]

This bug has been automatically resolved after a period of inactivity (see above
comment). If anyone thinks this is incorrect, they should feel free to reopen it.