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

I believe that almost all web application users want that when they fill out the application data into a form, then they can use the Enter key to move the cursor from one input field to the next input field quickly. As we know that by default, to switch from one Input Field to the next Input Field on a form, users must use the Tab key. Unfortunately, PHPMaker has not handled the ability to use Enter key in order to move the cursor to the next Input Field.

To overcome this issue in a web application that generated by PHPMaker, I have found a way how this can be solved by using jQuery. We will use Enter key to move the cursor from one Input Field to another. In other words, each time user press the Enter key, then the next Input Field will automatically get focus. It also will handle if the last element in that form is the button, then when user press Enter, it will press the button and submit the form.

Unlike a lot of source code we found on the Internet that only discuss how to move the cursor from the same Input Fields (usually they only use TextBoxes for such case), then the following trick will handle the different Input Field types (TextBox, ComboBox/Select Option, and Option Button/Radio Button) that their order may not be always sequential. For example: You may have the order of the Input Fields in your form as following: "TextBox -> ComboBox -> RadioButton -> ComboBox -> TextBox" or "ComboBox -> ComboBox -> TextBox -> RadioButton -> ComboBox -> TextBox", etc. Many examples we found on the Internet have not handled those possibilities. Well, don't worry anymore, as I have managed all of those possibilities, too!

Important to know, that I only applied this trick to the three types of Input Fields. They are: Input (TextBox), Select (ComboBox), and Radio (Option Button). I did not apply this trick for TextArea, since users often require Enter key to add a new row in the data that they are typing. Does it make sense to you?

In addition, the following trick also will show you how to cope if the Input Fields that have been generated by PHPMaker is hidden or disabled. We also have to handle this situation, right? Why? Because we have to avoid undesirable condition (usually the cursor will not move as it should if the next Input Field is hidden or disabled).

Another advantages of this trick, it does not interfere with the function of the Enter key to select the record on the list that appears when you are using the Auto Fill feature for the TextBox field. In addition, after you select the data by pressing the Enter key to fill out the record into the TextBox which has the Auto Fill feature before, then the cursor will automatically move to the next Input field after the desired record had been chosen. It also will handle if the next element is the submit button.

This trick also includes the feature that will automatically set focus on any type of Input Field which was first found in the newly displayed page. The impact is, if you display a language selector in the top (header) of your web application, then the cursor will automatically focus on it first, because it is the first element / that appears on the top of the page, right? But don't worry, I will also show you how to pass the language selector, if the next element type after it is still ComboBox.

All of those tricks will be placed into the Client Scripts section that belongs to either Add/Copy pages or Edit pages of your PHPMaker. In other words, no need to modify the generated scripts.

Again! Your life and your users' life become easier with I Love PHP Maker. 🙂

[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 Server Events/Client Scripts tab. Go to the Client Scripts -> Table-Specific -> Add/Copy Page -> Client Script, and insert this following code:

   $(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. Insert the following code for the Edit Page -> Client Script that located at the same level with the Add/Copy Page:

   // 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] The difference between the code for Add and Edit 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] with the following one: [code lang="php"] var select = $('select:visible', this).get(1); // <-- 1 = skip focus on the language selector! [/code]

6. Finally, don't forget to save the changes, and re-generate your script files as usual using PHPMaker.

[/hidepost]