Solved

Send Focus( ) to a button & Click it

Posted on 2001-06-12
12
310 Views
Last Modified: 2007-12-19
I have 7 buttons on an HTML form for various record navigation and functions (FIRST, PREV, NEXT, LAST, ADD, DELETE, SEARCH)

<table>
<tr>
<td><input type="submit" Name="ActEdi" Value="  <<  "></td>
<td><input type="submit" Name="ActEdi" Value="  <  "></td>
<td><input type="submit" Name="ActEdi" Value="  >  "></td>
<td><input type="submit" Name="ActEdi" Value="  >>  "></td>
<td><input type="submit" Name="ActEdi" Value="  Add  "></td>
<td><input type="submit" Name="ActEdi" Value="Delete"></td>
<td><input type="submit" Name="ActEdi" Value="Search"></td>
</tr>
</table>

I can set the focus to a particular INPUT box ...
{
document.forms[0].MyInput.focus();
}

but this doesn't work for a particular SUBMIT button.

I have figured out the JavaScript to trap FunctionKeys, and want to set focus and activate a button based on the FunctionKey pressed.

The F2 button should "Click" the second, or "Previous" (  <  ) button...

<td><input type="submit" Name="ActEdi" Value="  <  "></td>

Can anyone help me do that?  

I don't need the KeyTrap code, just what would go in the F2( ) function.

TIA!


0
Comment
Question by:DavidWare
  • 4
  • 3
  • 2
  • +3
12 Comments
 
LVL 8

Expert Comment

by:edemcs
ID: 6182566
if you can't find the focus function for the buttons, do an onKeyPress:

if (buttonPressed == "<")
 {
  document.location "www.somewhere.com";
 }
else if(buttonPressed ==">")
.
.
.
end if

does that make sense?
0
 

Author Comment

by:DavidWare
ID: 6182644
edemcs,
I don't understand what you mean by "if you can't find the focus function for the buttons..."

What I'm trying to do is get the F2 Key to SUBMIT to the new asp file with the value "  <  ".  

You see, the form POSTs to another asp file,

          <Form Method=Post Action="HCFRCoUpdMov.asp" id=form1 name=form1>

passing the VALUE of the "ActEdi" button that was clicked.  

          <input type="submit" Name="ActEdi" Value="  <  ">

So if the user clicks the second button (with a value of "  <  ") then the new asp page interprets that for a particular function.

So what I'm trying to do is get the F2 Key to SUBMIT to the new asp file with the value "  <  ".  The way I was designing was to have the button get "clicked" when the F2 Key is pressed, but I don't know how to set the focus to the button, and then "click" it.
0
 
LVL 14

Expert Comment

by:avner
ID: 6182668
<BODY onload="document.bb.aa.click()">
<form action="http://www.yahoo.com" id="bb" name="bb">
<input type="submit" id="aa" name="aa">
</form>
</BODY>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Expert Comment

by:bebonham
ID: 6182673
when you

<HTML><HEAD>

<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">

function al()
{
alert('kp')
document.forms[0].but.focus()
document.forms[0].but.onclick()
}
</SCRIPT>

</HEAD>


<BODY>
<a href="#" onclick="al();return false">click to give focus and run the function in the buttons</A>
<FORM> <INPUT TYPE="BUTTON" ONCLICK="alert('click')" NAME="but"></FORM></BODY></HTML>
0
 
LVL 8

Expert Comment

by:bebonham
ID: 6182677
just try it
0
 

Author Comment

by:DavidWare
ID: 6182792
avner & bebonham,
Thanks to both of you for your input.

I think the real problem is that all of my buttons have the same name.  Even though this works for Clicking, it kind of screws up setting focus.

I'm trying to do this in KeyCapture, but both of you had me place something on the form to click, and even though bebonham added ...

document.forms[0].but.focus()
document.forms[0].but.onclick()

... there was only one button named "but".  So the Focus( ) worked fine.

I will keep working on it.
0
 
LVL 14

Expert Comment

by:avner
ID: 6182804
1. you can add an ID to all of the buttons , this way when you send it , it'll use the name , but using DHTML you can use the ID.

another approach is an IE only :

document.getElementsByName("BUT")[2].click()

will click on the thrid button.
0
 
LVL 3

Accepted Solution

by:
yas022100 earned 50 total points
ID: 6183649
What you can also do is instead of trapping what user did, change action depending on what user clicked
something like

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<Form Name=frmInput ID=frmInput Action=Change.htm Method=post>
<table>
<tr>
<td><input type="submit" Name="ActEdi" Value="  <<  " onClick=First()></td>
<td><input type="submit" Name="ActEdi" Value="  <  " onClick=Back()></td>
<td><input type="submit" Name="ActEdi" Value="  >  " onClick=Forward()></td>
<td><input type="submit" Name="ActEdi" Value="  >>  " onClick=Last()></td>
<td><input type="submit" Name="ActEdi" Value="  Add  " onClick=Add()></td>
<td><input type="submit" Name="ActEdi" Value="Delete" onClick=Delete()></td>
<td><input type="submit" Name="ActEdi" Value="Search" onClick=Search()></td>
</tr>
</table>
</Form>

<Script Language=Javascript>
   function First()
   {
      document.frmInput.action = 'Forward.htm'
   }
   function Back()
   {
      document.frmInput.action = 'back.htm'
   }
   function Forward()
   {
      document.frmInput.action = 'Forward.htm'
   }
   function Last()
   {
      document.frmInput.action = 'Last.htm'
   }
   function Add()
   {
      document.frmInput.action = 'Add.htm'
   }
   function Delete()
   {
      document.frmInput.action = 'Delete.htm'
   }
   function Search()
   {
      document.frmInput.action = 'Search.htm'
   }
</Script>
</BODY>
</HTML>

Does that make sense?
0
 
LVL 8

Expert Comment

by:bebonham
ID: 6183721
this works for me on ie ns4+ ns6


<HTML><HEAD>

<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">

function al()
{
document.forms[0].but[1].focus()
document.forms[0].but[1].click()
}
</SCRIPT>

</HEAD>


<BODY>
<a href="#" onclick="al();return false">click to give focus and run the function in the buttons</A>
<FORM> <INPUT TYPE="BUTTON" ONCLICK="alert('click1')" NAME="but" VALUE="but1">
 <INPUT TYPE="BUTTON" ONCLICK="alert('click2')" NAME="but" VALUE="but2">
  <INPUT TYPE="BUTTON" ONCLICK="alert('click3')" NAME="but" VALUE="but3">
   <INPUT TYPE="BUTTON" ONCLICK="alert('click4')" NAME="but" VALUE="but4">


</FORM></BODY></HTML>



Bob

thanks to avner: onclick doesn't work in ns6



0
 
LVL 4

Expert Comment

by:DMN
ID: 6183890
Did you try to give different names to your buttons? focus() should work then.
0
 

Author Comment

by:DavidWare
ID: 6364787
sorry for the delay.  the customer backed out of this project and we haven't had time to finish it unpaid, but I will come back here to clean this up soon.
thanks for your patience.  I won't disappear.
0
 

Author Comment

by:DavidWare
ID: 6524986
Thanks to all for your input.
David
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Worldmap 1 28
Html date format 9 20
Jquery if else not working ... WHY? 5 23
assigning javascript variable to php variable 8 33
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question