title: get element id that was involved in triggering an event
body: <p>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.</p>
  
  <pre><code>  &lt;form id="FormVoucher" name="FormVoucher" method="post" action="index.php"&gt;
      &lt;table width="100%"&gt;
        &lt;tr&gt;
          &lt;td&gt;Supplier Number:&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" size="25" value="" name="Facctnmb" id="Facctnmb" AUTOCOMPLETE=OFF /&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Invoice Number:&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="Finvnmb" id="Finvnmb" size="25" maxlength="25" AUTOCOMPLETE=OFF /&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Invoice Amount:&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="Finvamt" id="Finvamt" size="25" maxlength="30" AUTOCOMPLETE=OFF /&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Invoice Date:&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="Finvdt" id="Finvdt" size="10" AUTOCOMPLETE=OFF /&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Purchase Order:&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="Fpo" id="Fpo" size="10" maxlength="8" AUTOCOMPLETE=OFF /&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Remark:&lt;/td&gt;
          &lt;td&gt;&lt;input name="Fremark" id="Fremark" type="text" size="30" maxlength="30" AUTOCOMPLETE=OFF /&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div align="left"&gt;
        &lt;p&gt;G/L: &lt;input name="Fgl[]" id="Fgl[]" type="text" size="12" maxlength="15" AUTOCOMPLETE=OFF /&gt; Amount: &lt;input name="Famt[]" id="Famt[]" type="text" size="15" maxlength="15" AUTOCOMPLETE=OFF /&gt;&lt;/p&gt;
        &lt;p id="add-element"&gt;Add More G/L Lines For Entry&lt;/p&gt;
        &lt;div id="content"&gt;&lt;/div&gt;
        &lt;input type="submit" value="Submit" /&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>javascript    </p>
  
  <pre><code>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 &gt; -1 &amp;&amp; ( index + 1 ) &lt; 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: &lt;input name="Fgl[]" id="Fgl[]" type="text" size="12" maxlength="15" AUTOCOMPLETE=OFF /&gt; Amount: &lt;input name="Famt[]" id="Famt[]" type="text" size="15" maxlength="15" AUTOCOMPLETE=OFF /&gt;';
      el.appendChild(ela);
      Dom.add(el, 'content');
  
      Event.add(ela, 'click', function(e) {
        Dom.remove(el);
        Dom.remove(ela);
      });
    });
  });
  </code></pre>