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 ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box bug calendar cart checkbox class codes column createrange() css cursor date debugger decimal design dom download dropdown element embed enter error explorer firefox focus form frameworks getselection google gwt hiddenvalue hint html htmlform ie7 iframe images index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 object onmouseover paypal php player position post problem programming progressbar prototype redirect regex runtime safari scale scriptlets search security select shopping size software sql text textarea toggle unicode w3c website window windowofwords windowsxp wysiwyg
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC