Set Focus After Submit with Form Plugin

Set Focus After Submit with Form Plugin

Hello everyone,

I have created a form with malsup's Form Plugin wherein it submits on change of the inputs. However, after each submission, the form loses focus, which forces the user to click on the next input element after each input change, which is a bit annoying. Is there a way I could set the form to automatically focus on the next input element after the submission depending on which input element the form was submitted from? Thank you in advance to anyone that helps me with this issue. Here is a live link to my form and here is the code:

sample.php
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Calculator</title>
  6. <?
  7.     function handler() {
  8.         include 'sample2.php';
  9.     }
  10. ?>
  11. </head>
  12. <body>
  13. <div id="main">
  14.     <? handler(); ?>
  15. </div>       
  16. </body>
  17. </html>

sample2.php
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5. <script type="text/javascript" src="js/jquery.form.js"></script>
  6. <script type="text/javascript">
  7. //AJAX Submit for Calculations
  8. $(document).ready(function() {
  9.     var options = {
  10.         target: '#main'
  11.     };
  12.     $(this).change(function (event) {
  13.         $('#captured').val(event.target.id);
  14.     });
  15.     $('#calculator').live('submit', function() {
  16.         $(this).ajaxSubmit(options);
  17.         return false;
  18.     });
  19. });
  20. function setFocus() {
  21.     with (document.calculator)
  22.         document.getElementById(recaptured.value).focus();           
  23. }
  24. </script>
  25. <?php
  26. $X = $_POST['X'];
  27. $Y = $_POST['Y'];
  28. $Z = $_POST['Z'];
  29. $A = $_POST['A'];
  30. $B = $_POST['B'];
  31. $captured = $_POST['captured'];
  32. $recaptured = $_POST['recaptured'];
  33. if(isset($X)) {
  34.     $calc = $X+$Y+$Z+$A+$B;
  35.     $recalc = $calc;
  36.     $recaptured = $captured;
  37. } else {
  38.     $X = 1;
  39.     $Y = 1;
  40.     $Z = 1;
  41.     $A = 1;
  42.     $B = 1;
  43.     $calc = 5;
  44.     $recalc = $calc;
  45.     $captured = "";
  46.     $recaptured = $captured;
  47. }
  48. ?>
  49. </head>
  50. <body onload="setFocus();">
  51.     <form action="sample2.php" id="calculator" name="calculator" method="post">
  52.         <fieldset>
  53.             <legend>Input</legend>
  54.             X = <input name="X" id="X" type="text" value="<? echo "$X" ?>" onChange="$('#calculator').submit();" /><br />
  55.             Y = <input name="Y" id="Y" type="text" value="<? echo "$Y" ?>" onChange="$('#calculator').submit();" /><br />
  56.             Z = <input name="Z" id="Z" type="text" value="<? echo "$Z" ?>" onChange="$('#calculator').submit();" /><br />
  57.             A = <input name="A" id="A" type="text" value="<? echo "$A" ?>" onChange="$('#calculator').submit();" /><br />
  58.             B = <input name="B" id="B" type="text" value="<? echo "$B" ?>" onChange="$('#calculator').submit();" /><br />
  59.         </fieldset><br />
  60.         <fieldset>
  61.             <legend>Output</legend>
  62.             X+Y = <? echo $calc ?><br />
  63.             recalc = <? echo $recalc ?><br />
  64.             captured = <input name="captured" id="captured" type="text" value="" /><br />
  65.             recaptured = <input name="recaptured" id="recaptured" type="text" value="<? echo "$recaptured" ?>" />
  66.         </fieldset>
  67.     </form>
  68. </body>
  69. </html>