Get the identifier of the element that was involved in triggering the event

Question

I was looking for google, but nobody seems to have encountered this problem. I have a keypress event on a form. I will disable the input key (until all required fields are filled in) and try to include the + key to go to the next available input area in the form. My form is highly dynamic, except for a couple of required fields, so I won’t know which element of the field someone is on when they press the + key. I just need to move on to the next form input element. Here is my code so far. Disabling the enter key works fine. I just need to find a way to move focus from the current input field to the next available input field. Therefore, if you know the best way, 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

Edit:

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

IN:

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

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

Edit: to get the item id, as the question name asks, refer to Chris's next answer .

Answer 2

To get the identifier of the DOM element that raised the event:

$(event.target).attr("id")

Example:

 $("button").click(function(event){ var id = $(event.target).attr("id"); alert (id); });