Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 1050

Nov 29th, 2008

Javascript web forms without click

Expand Post »

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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>

Last edited by frank754; Nov 29th, 2008 at 1:28 pm.

Similar Threads

To align the whole web page in the centre of the page in ASP.NET
Unwanted data injected into datagrid textbox in ASP.NET

frank754

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

23 posts
since Oct 2008

Permalink

Nov 29th, 2008

Re: Javascript web forms without click

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()">

javascript Syntax (Toggle Plain Text)
function setInputFocus() {
            var focusEl = getElementById('1_input');
            focusEl.focus();
}
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.

html Syntax (Toggle Plain Text)
<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;
.
.
.
.
<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;
.
.
.
.

Luckychap

Reputation Points: 83

Solved Threads: 61

Posting Pro in Training

Offline

442 posts
since Aug 2006

Permalink

Nov 30th, 2008

Re: Javascript web forms without click

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script type="text/javascript">
   function SetInputFocus() {
      document.getElementById('1_input').focus();
   }
   window.onload = SetInputFocus;
</script>
<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...cript_no19.htm
So all is looking great!
Appreciated your quick reply
Frank

frank754

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

23 posts
since Oct 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: get size of image file in K , Kb and restrict uplaod if file size is above speci

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Problem Using innerHTML

DaniWeb Message

Cancel Changes

User Name
Password