How to Set Focus on Next Input Field Using jQuery When Users Press Enter in Websites that Generated by PHPMaker 9.0.2

This following trick will show you how to move cursor by using Enter key from one input field to the next input field on a form in websites that generated by PHPMaker 9. Instead of using Tab key, then we will use Enter key in order to set focus the next input field on a form while users are inserting or editing record. You can read the complete explanation from this article.

We will add our code (using jQuery) into the Client Scripts of PHPMaker. In other words, we will not modify any generated script files.

Updated on July 22, 2012: This customization has been implemented in PHPMaker version 9.0.3, it matches to each other, and as a result, it works properly.

Updated on September 5, 2012: This customization has been implemented in PHPMaker version 9.0.4, it matches to each other, and as a result, it works properly.

Updated on November 29, 2012: This customization has been implemented in PHPMaker version 9.1.0, it matches to each other, and as a result, it works properly.

Updated on February 9, 2013: This customization has been implemented in PHPMaker version 9.2.0, it matches to each other, and as a result, it works properly.

[hidepost]

1. Open your PHPMaker project (.pmp) file using PHPMaker application.
2. Click on Database icon on the toolbar, then click one of your desired table, and then click on the Code (Server Events, Client Scripts and Custom Templates) tab. Expand the following section: Client Scripts -> Table-Specific -> Add/Copy Page -> Client Script, and insert this following code into the right pane:

   $(document).ready(function() {

   var elem = $('input:visible', this).get(0);
   var textarea = $('textarea:visible', this).get(0);
   if (textarea && elem) {
   if (textarea.offsetTop < elem.offsetTop) { elem = textarea; } } var select = $('select:visible', this).get(0); // <-- replace 0 with 1 if you want to skip focus on the language selector! if (select && elem) { if (select.offsetTop < elem.offsetTop) { elem = select; } } if (elem) { elem.focus(); } $('input').keydown( function (event) { //event==Keyevent if(event.which == 13) { var inputs = $(this).closest('form').find(':input:visible:enabled'); var idx = inputs.index(this); if (idx == inputs.length - 1) { // handling submit button! } else { inputs.eq( inputs.index(this)+ 1 ).focus(); event.preventDefault(); //Disable standard Enterkey action } } }); $('select').keydown( function (event) { //event==Keyevent if(event.which == 13) { var inputs = $(this).closest('form').find(':input:visible:enabled'); var idx = inputs.index(this); if (idx == inputs.length - 1) { // handling submit button! } else { inputs.eq( inputs.index(this)+ 1 ).focus(); event.preventDefault(); //Disable standard Enterkey action } } }); $('radio').keydown( function (event) { //event==Keyevent if(event.which == 13) { var inputs = $(this).closest('form').find(':input:visible:enabled'); var idx = inputs.index(this); if (idx == inputs.length - 1) { // handling submit button! } else { inputs.eq( inputs.index(this)+ 1 ).focus(); event.preventDefault(); //Disable standard Enterkey action } } }); }); [/code]

3. Next step, insert the following code for the Edit Page -> Client Script that located at the same level with the Add/Copy Page above:

   // Enter to move to next Input Field
   $(document).ready(function() {
   var elem = $('input:visible', this).get(0);
   var textarea = $('textarea:visible', this).get(0);
   if (textarea && elem) {
   if (textarea.offsetTop < elem.offsetTop) { elem = textarea; } } var select = $('select:visible', this).get(0); // <-- replace 0 with 1 if you want to skip focus on the language selector! if (select && elem) { if (select.offsetTop < elem.offsetTop) { elem = select; } } if (elem) { elem.focus(); elem.select(); } $('input').keydown( function (event) { //event==Keyevent if(event.which == 13) { var inputs = $(this).closest('form').find(':input:visible:enabled'); var idx = inputs.index(this); if (idx == inputs.length - 1) { // handling submit button! } else { inputs.eq( inputs.index(this)+ 1 ).focus(); inputs.eq( inputs.index(this)+ 1 ).select(); event.preventDefault(); //Disable standard Enterkey action } } }); $('select').keydown( function (event) { //event==Keyevent if(event.which == 13) { var inputs = $(this).closest('form').find(':input:visible:enabled'); var idx = inputs.index(this); if (idx == inputs.length - 1) { // handling submit button! } else { inputs.eq( inputs.index(this)+ 1 ).focus(); inputs.eq( inputs.index(this)+ 1 ).select(); event.preventDefault(); //Disable standard Enterkey action } } }); $('radio').keydown( function (event) { //event==Keyevent if(event.which == 13) { var inputs = $(this).closest('form').find(':input:visible:enabled'); var idx = inputs.index(this); if (idx == inputs.length - 1) { // handling submit button! } else { inputs.eq( inputs.index(this)+ 1 ).focus(); inputs.eq( inputs.index(this)+ 1 ).select(); event.preventDefault(); //Disable standard Enterkey action } } }); }); [/code] Please note that the difference between the code for Add and Edit section above is that we add the calling of select() below the calling of focus() in order to highlight all characters in the textbox for Edit mode.

4. Repeat the step number two and three above for another tables you desire.
5. Please note that if you want to skip focus on the language selector (if your web application is running the multi language feature), then change this code:

   var select = $('select:visible', this).get(0); // <-- replace 0 with 1 if you want to skip focus on the language selector! [/code] become: [code lang="php"] var select = $('select:visible', this).get(1); // <-- 1 = skip focus on the language selector! [/code]

6. If you want to avoid adding that code in each and every table, then alternatively you can insert the related code above into C:\Program Files\PHPMaker 9\src\phpcodebase.xml file. Find this code:

   


7. Make sure you have already checked (give tick mark) at Use jQuery and Local jQuery files items from Tools -> Advanced Settings of your PHPMaker application.
8. Finally, don’t forget to save the changes, and re-generate your script files using PHPMaker as always.