Figuring out which form button was pressed

[darrel]

On my vb.net page, I have 4 sets of inputs + form buttons.

example:

Search: [___________] (GO)
Zip: [____________] (GO)
County: [select a county | \/ ] (GO)
County: [select a building | \/ ] (GO)

The problem is if I go to the page, type in a zip code, and hit enter.

What happens is that the SEARCH button is triggered...not the ZIP button.

Is there any way to automatically move focus to the correct submit button
upon hitting return?

-Darrel

 

[Fao, Sean]

On my vb.net page, I have 4 sets of inputs + form buttons.

example:

Search: [___________] (GO)
Zip: [____________] (GO)
County: [select a county | \/ ] (GO)
County: [select a building | \/ ] (GO)

The problem is if I go to the page, type in a zip code, and hit enter.

What happens is that the SEARCH button is triggered...not the ZIP button.

Is there any way to automatically move focus to the correct submit button
upon hitting return?

I'm sure this could be accomplished some how using JavaScript, but that
sounds like a bad design and will ultimately confuse many users who will
also not know what to expect when they hit the enter button. Why have
many "GO" buttons?

I'd seriously recommend rethinking your design unless you have a very
good reason to do that.

 

[Guest]

you could place a hidden field on each form with the same name e.g "hfField"
but give them all different values e.g "value ="Search", value="Zip".

The on hte server just say something like :

If request("hffield") = "Zip" then
do the zip code
elseIf request("hffield") = "Search" then
do the search code e.t.c.

Its a bit convoluted but it does work.

Hope this helps.

 

[ATJaguarX]

VB.Net can have one default button...

Add this to your page_load.

Page.RegisterHiddenField("__EVENTTARGET", "btnSearch")

If you're looking to have the appropriate button triggered based on
what field they're in, try javascript... but I would also rethink your
design.

On my vb.net page, I have 4 sets of inputs + form buttons.

example:

Search: [___________] (GO)
Zip: [____________] (GO)
County: [select a county | \/ ] (GO)
County: [select a building | \/ ] (GO)

The problem is if I go to the page, type in a zip code, and hit enter.

What happens is that the SEARCH button is triggered...not the ZIP button.

Is there any way to automatically move focus to the correct submit button
upon hitting return?

I'm sure this could be accomplished some how using JavaScript, but that
sounds like a bad design and will ultimately confuse many users who will
also not know what to expect when they hit the enter button. Why have
many "GO" buttons?

I'd seriously recommend rethinking your design unless you have a very
good reason to do that.

 

[Fao, Sean]

you could place a hidden field on each form with the same name e.g "hfField"
but give them all different values e.g "value ="Search", value="Zip".

The on hte server just say something like :

If request("hffield") = "Zip" then
do the zip code
elseIf request("hffield") = "Search" then
do the search code e.t.c.

Its a bit convoluted but it does work.

That won't work because the browser is automatically firing the Click
event for the Search button when he hits enter. Besides, I don't even
see a reason to use hidden fields, to begin with. Each individual
button can have an event handler in the server side code.

 

[Mark Newmister]

Place this javascript in your page:

function fnTrapKP(btnName){
if (event.keyCode == 13)
{
var btn = document.getElementById(btnName);
event.returnValue=false;
event.cancelBubble = true;
btn.click();
}
}

....then modify the attributes of each search field to pass in the
corresponding search button:

this.txtFindValue.Attributes.Add("onKeyPress", "fnTrapKP('" +
btnFind.ClientID +"');");

 

[Fao, Sean]

Place this javascript in your page:

function fnTrapKP(btnName){
if (event.keyCode == 13)
{
var btn = document.getElementById(btnName);
event.returnValue=false;
event.cancelBubble = true;
btn.click();
}
}

...then modify the attributes of each search field to pass in the
corresponding search button:

this.txtFindValue.Attributes.Add("onKeyPress", "fnTrapKP('" +
btnFind.ClientID +"');");

This will work, but I find it likely that confusion will set in when a
user enters text in two or more fields.

Off the top of my head, I can't remember everything that triggers an
onKeyPress event, however, consider the following example:

1) The user enters text in the Zip field
2) The user enters text in the Search field
3) The user sets focus back on the Zip field
4) The user hits the enter button

So which OnClick event is fired? I believe it's the button for the Zip
field (but the Enter key might have also fired the OnKeyPress event),
but the bottom line is that it's an obvious confusion. And the user
need not even set focus back to the Zip field. If two or more input
boxes contain data, it won't be readily obvious what's going to happen.

For this reason, I still recommend a design change unless there's a very
good reason to use this method.

 

[darrel]

I'm sure this could be accomplished some how using JavaScript, but that

sounds like a bad design and will ultimately confuse many users who will
also not know what to expect when they hit the enter button. Why have
many "GO" buttons?

Becasue these are all independent concepts. They each do a different thing.

Ie, the search field has nothing to do with selecting a county.

-Darrel

 

[darrel]

That won't work because the browser is automatically firing the Click

event for the Search button when he hits enter. Besides, I don't even see
a reason to use hidden fields, to begin with. Each individual button can
have an event handler in the server side code.

Right. The problem is really on the front end. By default, hitting return
triggers the first form submit button.

-Darrel

 

[darrel]

If you're looking to have the appropriate button triggered based on

what field they're in, try javascript... but I would also rethink your
design.

I'm thinking that there just isn't a solution to this ;o)

The issue is that I need some sort of event in javascript to trigger focus
on the approporiate button. However, there isn't an event to trigger from.

-Darrel

 

[darrel]

function fnTrapKP(btnName){

if (event.keyCode == 13)
{
var btn = document.getElementById(btnName);
event.returnValue=false;
event.cancelBubble = true;
btn.click();
}
}

...then modify the attributes of each search field to pass in the
corresponding search button:

this.txtFindValue.Attributes.Add("onKeyPress", "fnTrapKP('" +
btnFind.ClientID +"');");

This looks interesting. You explain what is happening? It appears that when
the search field is being editing, the onKeyPress trigger calls the
function. I'm not quite sure what the function is doing, though. It it
posting the form for me?

-Darrel

 

[darrel]

1) The user enters text in the Zip field
2) The user enters text in the Search field
3) The user sets focus back on the Zip field
4) The user hits the enter button

So which OnClick event is fired?

Valid concern, however these fields all do different things. So it'd be most
likely thata person would just enter one field. However, if they do, I think
it'd trigger the last field editied, correct? I'd find that an acceptable
behavior.

For this reason, I still recommend a design change unless there's a very
good reason to use this method.

I'd be up for that. Any suggestions on what you'd do to redesign it?

-Darrel

 

[darrel]

OK, I think I've figured out a way to handle this server side.

I'll have this:

Search: [___________] (GO)
Zip: [____________] (GO)
County: [select a county | \/ ] (GO)
Building: [select a building | \/ ] (GO)

If the ZIP, County, or Building buttons are clicked, I'll just execute the
page based on that button's event handler.

If the SEARCH button is pressed, I'll do a few things:

- if search field contains text then...perform search
- if not, if zip field contains text then...go to zip tool
- if not, if County is not set to default...go to county tool
etc...

Basically, I will just not assume a SEARCH button click was actually
intended to be a search and just check for items within it's own event
handler.

The Catch:

The catch is that the above 4 form fiels aren't be loaded by the same
usercontrol. Specifically, the SEARCH control is independant of the others,
even though they render on the same page. As such, I'm not quite sure how to
handle this...or if I even can when they all come from different controls.

-Darrel

 

[Fao, Sean]

Becasue these are all independent concepts. They each do a different thing.

Ie, the search field has nothing to do with selecting a county.

I wonder if I'm not understanding the ultimate goal. Usually if things
are unrelated, I separate them into separate pages, altogether. But
since you've put them all on one, I must assume that you did so for a
valid reason.

On that note, a possible alternative would be to have a single submit
button and form validation that prohibits two or more text boxes from
having input supplied in them. However, this would likely lead to user
frustration if the user hits the back button after performing one
function and moving on to another function, because the text from the
previous run would still be in the input box.

Is it possible/acceptable to perform two or more operations
simultaneously? If so, you could check to see which input boxes have
input and perform the corresponding operation for each of them.

Hope that helps,

 

[Mark Newmister]

I agree with Sean that you probably really don't need 4 buttons - just 1.
When the user clicks the one button just do a search using any field that is
populated - similar to the address search on MapQuest:

http://www.mapquest.com/

However, I would still use the code I provided to "click" the one button
when the user presses [Enter] so they don't necessarily have to reach for
the mouse and explicitly click it - i.e., convenience for the user.

Yes, when the search field has *focus* and you press [Enter], it will click
the button (object name) that you pass into the function. The object name
of your button comes from this part of the code:

....btnFind.ClientID...

Obviously, all of this assumes that each button is a server control
(Runat="Server").

I will do the same thing as when you physically click the button with the
mouse.

 

[darrel]

I agree with Sean that you probably really don't need 4 buttons - just 1.

When the user clicks the one button just do a search using any field that
is populated - similar to the address search on MapQuest:

http://www.mapquest.com/

That makes sense in that all the fields are basically doing the same
thing...searching for an address.

In our interface, these field do completely different things. They are not
related other than they are all ways to get to different types of content on
the site.

Yes, when the search field has *focus* and you press [Enter], it will
click the button (object name) that you pass into the function. The
object name of your button comes from this part of the code:

This is perfect, then. I'll definitely give this a shot. What I was confused
was that I didn't see the onKeyPress specifically watching for the ENTER
key, but now that I look at it, that's exactly what the keyCode = 13 is.

Thanks!

-Darrel

 

[S. Justin Gengo [MCP]]

Darrel,

This is a common problem that is most often solved with javascript.

A script like this added to each of your textboxes, of course changing the
button, will take care of things:

TextBox1.Attributes.Add("onkeydown", "javascript:if((event.which &&
event.which == 13) || (event.keyCode && event.keyCode ==
13)){document.getElementById('" & Button1.ClientID & "').click();return
false;}else return true;")

The script checks each time a key is pressed while the given textbox has
focus. If the key is then enter key it triggers the button click for the
given button.

--
Sincerely,

S. Justin Gengo, MCP
Web Developer / Programmer

www.aboutfortunate.com

"Out of chaos comes order."
Nietzsche

 

[Laurent Bugnion]

Hi,

I'm thinking that there just isn't a solution to this ;o)

The issue is that I need some sort of event in javascript to trigger focus
on the approporiate button. However, there isn't an event to trigger from.

-Darrel

In JavaScript: <input type="text"
onchange="this.form.<buttonName>.focus();" />

You can add this scriptlet to the ASP.NET Textfield using

protected TextBox tfTest;
(...)

// In OnInit
tfTest.Attributes.Add( "onblur",
"document.getElementById('bnOk').focus();" );

Note that it only works if your button has a ClientId "bnOk", so if
you're in a UserControl, the JavaScript code above might not work,
because then the ID might be something different. If you're in a User
control, you must pass the unique Client ID of the button to the
client,so that document.getElementById returns something... Complicated,
I know.

Anyway, it's not very nice, and what happens in JavaScript is disabled?
So actually, your server should check the Request.Form collection, for
the name of the button pressed (the name of the button pressed is sent
from the client to the server as part of the Form, while other
non-pressed buttons' name is omitted). This way, you can compare if the
filled textfield and the button pressed actually match. In short: If the
bnOkSearch is pressed, the Form collection will contain an entry with
this name, and will not contain bnOkZip.

Still not a good design, but at least it's foolproof.

Note that the "normal" way to handle this in web development would be to
use one form for the ZIP area and another form for the Search area.
Unfortunately, ASP.NET (at least in 1.1) only supports one form per
page, which is silly in my opinion.

HTH,
Laurent

 

[darrel]

Darrel,

This is a common problem that is most often solved with javascript.

A script like this added to each of your textboxes, of course changing the
button, will take care of things:

TextBox1.Attributes.Add("onkeydown", "javascript:if((event.which &&
event.which == 13) || (event.keyCode && event.keyCode ==
13)){document.getElementById('" & Button1.ClientID & "').click();return
false;}else return true;")

Thanks!

-Darrel

 

[darrel]

Anyway, it's not very nice, and what happens in JavaScript is disabled?

So actually, your server should check the Request.Form collection, for the
name of the button pressed (the name of the button pressed is sent from
the client to the server as part of the Form, while other non-pressed
buttons' name is omitted). This way, you can compare if the filled
textfield and the button pressed actually match.

I was going to do this, but the issue is that all of these forms are
actually rendered in different usercontrols, so checking each one became a
bit more complex.

Note that the "normal" way to handle this in web development would be to
use one form for the ZIP area and another form for the Search area.
Unfortunately, ASP.NET (at least in 1.1) only supports one form per page,
which is silly in my opinion.

I concur. ;o)

-Darrel