JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Javascript web forms without click

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Oct 2008
Posts: 9
Reputation: frank754 is an unknown quantity at this point 
Solved Threads: 0
frank754 frank754 is offline Offline
Newbie Poster

Javascript web forms without click

 
0
  #1
Nov 29th, 2008
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) 
  1. <form action="depts.php" method="POST">
  2. Department number: <input type=text name="num" value="" size="2">
  3. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  4. Description: <input type=text name="text" value="" size="20"><br>
  5. Starting Sales: <input type=text name="startr" value="" size="12">
  6. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  7. Ending Sales: <input type=text name="endr" value="" size="12">
  8. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  9. Purchases: <input type=text name="purch" value="" size="12"><br>
  10. Credits: <input type=text name="credit" value="" size="12">
  11. &nbsp;&nbsp;&nbsp;&nbsp;
  12. Book Figure: <input type=text name="book" value="" size="12"> 
  13. &nbsp;&nbsp;&nbsp;&nbsp; 
  14. Cost Markup % <input type=text name="factor" value="" size="5">
  15. &nbsp;&nbsp;&nbsp;&nbsp; 
  16. <input type=submit name="submit" value="submit"><br><br>
Last edited by frank754; Nov 29th, 2008 at 1:28 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: Javascript web forms without click

 
0
  #2
Nov 29th, 2008
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) 
  1. function setInputFocus() {
  2.             var focusEl = getElementById('1_input');
  3.             focusEl.focus();
  4. }

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) 
  1. <form action="depts.php" method="POST">
  2.       Department number: <input id="1_input" type=text name="num" value="" size="2">
  3.  
  4. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  5. .
  6. .
  7. .
  8. .
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 9
Reputation: frank754 is an unknown quantity at this point 
Solved Threads: 0
frank754 frank754 is offline Offline
Newbie Poster

Re: Javascript web forms without click

 
0
  #3
Nov 30th, 2008
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) 
  1. <script type="text/javascript">
  2.    function SetInputFocus() {
  3.       document.getElementById('1_input').focus();
  4.    }
  5.    window.onload = SetInputFocus;
  6. </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
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxhelp animate array automatically beta box bug calendar cart checkbox child class codes column cookies createrange() css cursor decimal design disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox focus form forms frameworks google gwt html htmlform ie8 iframe image() images index internet java javascript jawascriptruntimeerror jquery jsf jsfile jsp jump listbox masterpage math menu microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent php player post problem progressbar prototype redirect regex runtime scale scroll search select session shopping size sql text textarea toggle validation w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC