Question

I have searched google but it seems no one has come across this issue. I have an keypress event set on a form. I am disabling the enter key(until all required fields are filled in) and trying to enable the + key to be used to move to the next available input area on the form. My form is highly dynamic other than the couple required fields so I won’t know what field element someone is on when they press the + key. I just need to move to the next form input element. Here is my code so far. The disabling of the enter key works fine. I just need to find a way of moving the focus from the current input field to the next available input field. So if you know of a better way please let me know.

  <form id="FormVoucher" name="FormVoucher" method="post" action="index.php">
    <table width="100%">
      <tr>
        <td>Supplier Number:</td>
        <td><input type="text" size="25" value="" name="Facctnmb" id="Facctnmb" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>Invoice Number:</td>
        <td><input type="text" name="Finvnmb" id="Finvnmb" size="25" maxlength="25" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>Invoice Amount:</td>
        <td><input type="text" name="Finvamt" id="Finvamt" size="25" maxlength="30" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>Invoice Date:</td>
        <td><input type="text" name="Finvdt" id="Finvdt" size="10" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>Purchase Order:</td>
        <td><input type="text" name="Fpo" id="Fpo" size="10" maxlength="8" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>Remark:</td>
        <td><input name="Fremark" id="Fremark" type="text" size="30" maxlength="30" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <div align="left">
      <p>G/L: <input name="Fgl[]" id="Fgl[]" type="text" size="12" maxlength="15" AUTOCOMPLETE=OFF /> Amount: <input name="Famt[]" id="Famt[]" type="text" size="15" maxlength="15" AUTOCOMPLETE=OFF /></p>
      <p id="add-element">Add More G/L Lines For Entry</p>
      <div id="content"></div>
      <input type="submit" value="Submit" />
    </div>
  </form>

javascript

var t;
//clear the search box on focus
function ClearIt(ClrIt)
{
  if (ClrIt.value != "") ClrIt.value = "";
}

//move to next form input field.
$.fn.focusNextInputField = function() {
    return this.each(function() {
        var fields = $(this).parents('form:eq(0),body').find(':input').not('[type=hidden]');
        var index = fields.index( this );
        if ( index > -1 && ( index + 1 ) < fields.length ) {
            fields.eq( index + 1 ).focus();
        }
        return false;
    });
};

//listen for the enter key and the + key being pressed
$('#FormVoucher').keypress(function(event) {
  var keycode = (event.keyCode ? event.keyCode : event.which);
  if(keycode == 13){
    event.preventDefault();
  }//$("form:FormVoucher").trigger("submit")
  if(keycode == 43){
    event.preventDefault();
    $(this).focusNextInputField(); //Here is the problem, I need to enter the element id instead of... this
  }
});

//add another set of input fields to the form.
var Dom = {
  get: function(el) {
    if (typeof el === 'string') {
      return document.getElementById(el);
    } else {
      return el;
    }
  },
  add: function(el, dest) {
    var el = this.get(el);
    var dest = this.get(dest);
    dest.appendChild(el);
  },
  remove: function(el) {
    var el = this.get(el);
    el.parentNode.removeChild(el);
  }
};
var Event = {
  add: function() {
    if (window.addEventListener) {
      return function(el, type, fn) {
 Dom.get(el).addEventListener(type, fn, false);
      };
    } else if (window.attachEvent) {
      return function(el, type, fn) {
 var f = function() {
   fn.call(Dom.get(el), window.event);
 };
 Dom.get(el).attachEvent('on' + type, f);
      };
    }
  }()
};
Event.add(window, 'load', function() {
  var i = 0;
  Event.add('add-element', 'click', function() {

    var ela = document.createElement('span');
    ela.innerHTML = ' --Delete' ;
    var el = document.createElement('p');

    el.innerHTML = 'G/L: <input name="Fgl[]" id="Fgl[]" type="text" size="12" maxlength="15" AUTOCOMPLETE=OFF /> Amount: <input name="Famt[]" id="Famt[]" type="text" size="15" maxlength="15" AUTOCOMPLETE=OFF />';
    el.appendChild(ela);
    Dom.add(el, 'content');

    Event.add(ela, 'click', function(e) {
      Dom.remove(el);
      Dom.remove(ela);
    });
  });
});

Answer 1

Change:

$(this).focusNextInputField(); //Here is the problem

Into:

$(event.target).focusNextInputField(); //No longer a problem : )

check here: http://jsfiddle.net/EAudU/

Edit: for getting the element id, as the question title asks, refer to the next answer by Chris.