Member Avatar for frank754

Normally, arriving at a PHP page with a data entry web form, you would have to click on any field you wish to change to go into data entry mode (the first field or any successive one), and then you can tab between fields (TAB to go forward or ALT-TAB to go back one or so) and then to activate the submit button you would only need to press enter.
What I'm wondering, is if upon arrival at the page you can bypass any mouse click at all, and just use the tab key and enter data for any field (perhaps just 2 out of 10), and then still requiring the enter key to submit the data.
So basically this would eliminate the need to click on any field first to start the data entry mode,
Is this possible? And also, if this is an easy fix, can I choose which field is highlighted first (where the tab key would point to) and perhaps add some coloration highlight to the active field at the time?
Thanks
The form code would start out (in the old manual way) as something like this:

<form action="depts.php" method="POST">
Department number: <input type=text name="num" value="" size="2">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Description: <input type=text name="text" value="" size="20"><br>
Starting Sales: <input type=text name="startr" value="" size="12">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Ending Sales: <input type=text name="endr" value="" size="12">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Purchases: <input type=text name="purch" value="" size="12"><br>
Credits: <input type=text name="credit" value="" size="12">
&nbsp;&nbsp;&nbsp;&nbsp;
Book Figure: <input type=text name="book" value="" size="12"> 
&nbsp;&nbsp;&nbsp;&nbsp; 
Cost Markup % <input type=text name="factor" value="" size="5">
&nbsp;&nbsp;&nbsp;&nbsp; 
<input type=submit name="submit" value="submit"><br><br>
  • 2 Contributors
  • 2 Replies
  • 141 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by frank754
Member Avatar for Luckychap

You have to just set the focus to the first input box after the page is loaded. And that can be done by simple javascript code.

Write an event-handler for <body onload="setInputFocus()">

function setInputFocus() {
            var focusEl = getElementById('1_input');
            focusEl.focus();
}

And your HTML code will also change a lil bit as you have to set a id for first input you want to focus onload.

<form action="depts.php" method="POST">
      Department number: <input id="1_input" type=text name="num" value="" size="2">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
.
.
.
.
Member Avatar for frank754

Thanks a lot, I had to play with it a bit, but got it to work just fine. In the head section I put:

<script type="text/javascript">
   function SetInputFocus() {
      document.getElementById('1_input').focus();
   }
   window.onload = SetInputFocus;
</script>

And then changed the form below to add the element name as you mentioned.
I also did a color mod which I found on this page:
http://www.netmechanic.com/news/vol5/javascript_no19.htm
So all is looking great!
Appreciated your quick reply
Frank

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.