By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,715 Members | 1,256 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,715 IT Pros & Developers. It's quick & easy.

Restore cursor position in a textbox [form]

P: 4
I have a form where there are n number fields. when a field (textbox) is entered and a update button is triggered to the form cursor should restore it's position in the text field.

Note: id's for the text boxes are generated dynamically as.. product[1], product[2],...

I'd appreciate any help.
Dec 2 '11 #1
Share this Question
Share on Google+
7 Replies


omerbutt
100+
P: 638
hi ,
do you have any code you are working on , please paste it here as we can point out in your code where you should make the change and it starts working , like this you mean first making a flow to generate the dynamic ids and then trouble shooting it, just provide the part of the code where the area of focus is and any dependent file involved that process
regards,
Omer Aslam
Dec 3 '11 #2

P: 4
Hi Omer! Thanks for replying..

My code is similar to

Expand|Select|Wrap|Line Numbers
  1. <form method="post" name="order_position">
  2. <table id="cartTable">
  3. <thead>
  4.     <tr><th>&nbsp;</th><th>&nbsp;</th></tr>
  5. </thead>                
  6. <tbody>
  7.     <tr><td><input id="product[1]" type="text" name="product[1]" /></td><td>&nbsp;</td></tr>
  8.     <tr><td><input id="product[2]" type="text" name="product[2]" /></td><td>&nbsp;</td></tr>
  9.     <tr><td><input id="product[3]" type="text" name="product[3]" /></td><td>&nbsp;</td></tr>
  10.     .
  11.     <tr><td><input id="product[9]" type="text" name="product[9]" /></td><td>&nbsp;</td></tr>
  12.     .
  13.     <tr><td><input id="product[15]" type="text" name="product[15]" /></td><td>&nbsp;</td></tr>
  14.     <tr><td><input id="product[16]" type="text" name="product[16]" /></td><td>&nbsp;</td></tr>                 
  15. </tbody>
  16. </table>
  17. <div><a href="#">Update</a><a href="#">Submit</a></div>
  18. </form>
  19.  
Now, for example my cursor is in textbox with id="product[9]" or consider product[x]. When I click on the update or submit button page reloads. After, page reload I need the cursor in the same textbox.

I'd appreciate any help.

Thanks in Advacne!
Dec 5 '11 #3

omerbutt
100+
P: 638
hi ,
create a hidden input
Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" name="last_active_input" id="last_active_input" value="" />
and on every input inside the form element apply a onfocus attribute which will pass the name / id of the input field and update the hidden input and then you submit the form and get the last_input_id and make an onload event if the last_input_id is received and move the focus to the input, see below it will make you clear the main concept
Expand|Select|Wrap|Line Numbers
  1. <?php 
  2.     $last_input_id='';
  3.     if($_POST['last_input_id']){
  4.         $last_input_id=$_POST['last_input_id'];    
  5.     }
  6. ?>
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8. <html xmlns="http://www.w3.org/1999/xhtml">
  9. <head>
  10. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  11. <title>Untitled Document</title>
  12. <script type="text/javascript">
  13. function updateLastInp(id){
  14.     document.getElementById('last_input_id').value=id;
  15. }
  16. <?php if ($last_input_id<>""){?>
  17. window.onload=function(){
  18.     document.getElementById('<?php echo $last_input_id;?>').focus();
  19. }
  20. <?php }?>
  21. </script>
  22. </head>
  23.  
  24. <body>
  25. <form method="post" name="order_position" target="_self">
  26. <table id="cartTable">
  27. <thead>
  28. <tr><th>&nbsp;</th><th>&nbsp;</th></tr>
  29. </thead>
  30. <tbody>
  31. <tr><td><input id="product[1]" type="text" name="product[1]" onfocus="updateLastInp(this.id);" /></td><td>&nbsp;</td></tr>
  32. <tr><td><input id="product[2]" type="text" name="product[2]" onfocus="updateLastInp(this.id);" /></td><td>&nbsp;</td></tr>
  33. <tr><td><input id="product[3]" type="text" name="product[3]" onfocus="updateLastInp(this.id);" /></td><td>&nbsp;</td></tr>
  34. .
  35. <tr><td><input id="product[9]" type="text" name="product[9]" onfocus="updateLastInp(this.id);" /></td><td>&nbsp;</td></tr>
  36. .
  37. <tr><td><input id="product[15]" type="text" name="product[15]" onfocus="updateLastInp(this.id);"  /></td><td>&nbsp;</td></tr>
  38. <tr><td><input id="product[16]" type="text" name="product[16]" onfocus="updateLastInp(this.id);"  /></td><td>&nbsp;</td></tr>
  39. </tbody>
  40. </table>
  41. <div><a href="#">Update</a><a href="#">Submit</a></div>
  42. <input type="hidden" name="last_input_id" id="last_input_id" value="" />
  43. </form>
  44.  
  45. </body>
  46. </html>
  47.  
  48.  
Regards,
Omer Aslam
Dec 5 '11 #4

P: 4
This looks great!

Can we call this script without php? Because I have to implement this on a jsp.
Dec 5 '11 #5

omerbutt
100+
P: 638
hi Shawn,
i dont know about jsp havent worked in it , but you have to change the core php to jsp to get the posted value from the form that i am sure you can do and after that is a simple if check which can also be converted easily , but be careful because this code
Expand|Select|Wrap|Line Numbers
  1. <?php if ($last_input_id<>""){?>
  2. window.onload=function(){
  3.     document.getElementById('<?php echo $last_input_id;?>').focus();
  4. }
  5. <?php }?>
  6.  
  7.  
which is inside the javascript tag needs to be implemented otherwise it will give javascript error onload , whereas the main logic that was to capture the name of the last active input has been achieved already by javascript so it wont matter if you take out the php code and replace it with the jsp relevant code lines , hope that helps, and please choose the correct post in case you find the solution , oso that any other person looking for the same soultion can have help too.
regards,
Omer Aslam
Dec 5 '11 #6

P: 4
No problem! You already have solved the puzzle for me. I'll make my efforts to put that in a jsp.

Thanks a ton!
Dec 5 '11 #7

omerbutt
100+
P: 638
:) glad to be of help my friend , and please choose the appropriate post as the correct answer.
regards,
omer aslam
Dec 5 '11 #8

Post your reply

Sign in to post your reply or Sign up for a free account.