How to tell which button a user pressed?

[Neil]

I have a form that looks like this:

<form onsubmit="return false;" action="[action]" method="post">
<textarea name="myText" cols="30" rows="3"></textarea>
<input type="button" name="button" value="Value2"
onClick="this.form.submit();"/>
<input type="button" name="button" value="Value2"
onClick="this.form.submit();"/>
</form>

When I look at the posted values, I do not have a value for the
button.
How can I tell which of these buttons the user pressed?

Thanks,
Neil

 

[Thomas 'PointedEars' Lahn]

<form onsubmit="return false;" action="[action]" method="post">
<textarea name="myText" cols="30" rows="3"></textarea>
<input type="button" name="button" value="Value2"
onClick="this.form.submit();"/>
<input type="button" name="button" value="Value2"
onClick="this.form.submit();"/>
</form>

When I look at the posted values, I do not have a value for the
button.
How can I tell which of these buttons the user pressed?

By RTFM and not shooting yourself in the foot:

<form action="..." method="post">
<textarea name="myText" cols="30" rows="3"></textarea>
<input type="submit" name="button" value="Value1" />
<input type="submit" name="button" value="Value2" />
</form>

Are you sure you want to use XHTML?


PointedEars

 

[Garrett Smith]

<form onsubmit="return false;" action="[action]" method="post">
<textarea name="myText" cols="30" rows="3"></textarea>
<input type="button" name="button" value="Value2"
onClick="this.form.submit();"/>
<input type="button" name="button" value="Value2"
onClick="this.form.submit();"/>
</form>

Using javascript to submit the form creates an unnecessary a11y barrier.

If you stop doing that; you should get the button value included in the
submission.

The reason for this can be explained.

When a form is submitted, the browser must determine which button was
activated (clicked) for the request.

Your form prevents normal submission with :
| <form onsubmit="return false;"

..

The INPUT button being clicked is a separate event.

By RTFM and not shooting yourself in the foot:

Link?

<form action="..." method="post">
<textarea name="myText" cols="30" rows="3"></textarea>
<input type="submit" name="button" value="Value1" />
<input type="submit" name="button" value="Value2" />
</form>

Are you sure you want to use XHTML?

Probably not; that small sample contains XHTML errors.

 

[Eric Bednarz]

[…] an unnecessary a11y barrier.

Words fail me.

I appreciate the absence of scripting to submit a form, but I think it
is still customary to use different names for multiple submit buttons if
you want to know which one was a successful control server-side.

Probably not; that small sample contains XHTML errors.

Please don’t feel shy about being specific.

 

[Garrett Smith]

[…] an unnecessary a11y barrier.

Words fail me.

That is not the code the OP posted. Did you change it?

I appreciate the absence of scripting to submit a form, but I think it
is still customary to use different names for multiple submit buttons if
you want to know which one was a successful control server-side.

Customary?


Please don’t feel shy about being specific.

Don't be scared to run the code through the w3c html validator and find
them for yourself.

 

[Thomas 'PointedEars' Lahn]

[…] an unnecessary a11y barrier.

Words fail me.

A(ccessibilit)y. Incidentally, a11y is an a11y barrier ;-)

I appreciate the absence of scripting to submit a form, but I think it
is still customary to use different names for multiple submit buttons if
you want to know which one was a successful control server-side.

You can use different names, different values, or both. Using different
names are better for i18n (internationalization) than using different values
for the distinction (as you don't need to modify the server-side script then
even though the button caption changes according to the user language).
However, the point here was to use code that was as similar to the original
one as possible.


PointedEars

 

[Thomas 'PointedEars' Lahn]

Don't be scared to run the code through the w3c html validator and find
them for yourself.

You don't know what you are talking about. It's a fragment of Valid XHTML
1.0 Transitional.


PointedEars

 

[Thomas 'PointedEars' Lahn]

<form onsubmit="return false;" action="[action]" method="post">
<textarea name="myText" cols="30" rows="3"></textarea>
<input type="button" name="button" value="Value2"
onClick="this.form.submit();"/>
<input type="button" name="button" value="Value2"
onClick="this.form.submit();"/>
</form>

Using javascript to submit the form creates an unnecessary a11y barrier.

More, it is completely pointless and counter-productive in this case.

If you stop doing that; you should get the button value included in the
submission.

The reason for this can be explained.

Humor me.

When a form is submitted, the browser must determine which button was
activated (clicked) for the request.

Yes, as can be read under "successful controls" in the HTML 4.01
Specification.

Your form prevents normal submission with :
| <form onsubmit="return false;"

.

The INPUT button being clicked is a separate event.

The INPUT button's `click' event is irrelevant here. The problem is that
calling the form's submit method does not make any button a successful
control.

Link?

Sense?


PointedEars

 

[Neil]

By RTFM and not shooting yourself in the foot:

  <form action="..." method="post">
    <textarea name="myText" cols="30" rows="3"></textarea>
    <input type="submit" name="button" value="Value1" />
    <input type="submit" name="button" value="Value2" />
  </form>

The problem is that I have text inputs on the form
as well and the customer does not want the return key
to submit the form. If I use input type="submit", the
form always gets posted with a return keypress.

 

[Garrett Smith]

[...]

Link?

Sense?

The OP does not know how to do what he wants done and that responding
with "RTFM" is going to come off as churlish and vague.

Make sense?

 

[Garrett Smith]

You don't know what you are talking about. It's a fragment of Valid XHTML
1.0 Transitional.

That is an assumption. It could very well be XHTML strict for all you know.

Going with your assumption of XHTML transitional, there is still one
error. Can't spot it? Error: There is no attribute "onClick".

Eric Bednarz apparently changed the OP's quote and removed that Error.
Why, I do not know.

 

[David Mark]

The problem is that I have text inputs on the form
as well and the customer does not want the return key
to submit the form.

Then how do they expect keyboard-only users to submit the form? The
customer is always right, but they pay consultants to tell them when
they are wrong.

If I use input type="submit", the
form always gets posted with a return keypress.

As it should.

 

[Sean Kinsey]

The problem is that I have text inputs on the form
as well and the customer does not want the return key
to submit the form.  If I use input type="submit", the
form always gets posted with a return keypress.

Use an event listener on the text fields that returns false on
keyCode===13. That should avoid submitting the form while allowing
enter to be pressed on any other input (including the buttons).

 

[Sean Kinsey]

Use an event listener on the text fields that returns false on
keyCode===13. That should avoid submitting the form while allowing
enter to be pressed on any other input (including the buttons).

And yes I accidentally hit submit before removing the signature so
don't even think about it.

 

[David Mark]

Use an event listener on the text fields that returns false on
keyCode===13. That should avoid submitting the form while allowing
enter to be pressed on any other input (including the buttons).

That will "work" assuming you are using DOM0. The problem is that it
doesn't really work as it breaks the form for keyboard-only users. Sure
they could guess that they have to tab to a non-text input. Or they
could just give up and go elsewhere. I've typically got a mouse handy
and such an incompetent intrusion would still piss me off. I'm sure I'd
hit enter a second time, wonder if my keyboard lost its connection, hit
another key to confirm it hadn't, curse whatever ill-conceived script
was getting in my way, etc.

 

[Garrett Smith]

The problem is that I have text inputs on the form
as well and the customer does not want the return key
to submit the form. If I use input type="submit", the
form always gets posted with a return keypress.

Who said the customer is always right?

I hate it when sites do that.

Trying to reinvent the way an HTML form works is surely going to annoy
users who prefer hitting "enter" upon completing a form. For example the
user might not want to tab through to the submit button and might really
hate using the trackpad.

Put the default button first and the form will submit that one when user
hits the return key (which is also called the "enter" key on many
keyboards).

 

[Garrett Smith]

And yes I accidentally hit submit before removing the signature so
don't even think about it.

I was puzzled by this. Then I read your other message and realized what
you meant.

 

[Bwig Zomberi]

Does not onsubmit="return false" prevent return keypress from submitting
the form?

Then how do they expect keyboard-only users to submit the form?

Keyboard-only users will usually use tab to navigate to the submit
button and then press the space key.

 

[Gordon]

You don't know what you are talking about.  It's a fragment of Valid XHTML
1.0 Transitional.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
)  // Plone, register_function.js:16

Form controls can't be children of a form. They have to be contained
in something else, a fieldset preferably, but a div will do.

 

[Bwig Zomberi]

<form onsubmit="return false;" action="[action]" method="post">
<textarea name="myText" cols="30" rows="3"></textarea>
<input type="button" name="button" value="Value2"
onClick="this.form.submit();"/>
<input type="button" name="button" value="Value2"
onClick="this.form.submit();"/>
</form>

The reason for this can be explained.

When a form is submitted, the browser must determine which button was
activated (clicked) for the request.

Your form prevents normal submission with :
| <form onsubmit="return false;"

.

The INPUT button being clicked is a separate event.

Why do other form values get submitted If you replace the input fields
with the type text, their values get submitted. They do not get
submitted only if the type is button or submit. Does some spec recommend
this?