For those of you who have implemented the customization that I wrote in the article How to Set Focus on Next Input Field Using jQuery When Users Press Enter in Websites that Generated by PHPMaker 9.0.2, then this following customization below is definitely for you! Yes, now we are going to add F2 Key Press functionality in order to submit data on the form in web applications that generated by PHPMaker.
This is very important, since when we have been using Enter key in order to move the cursor from one input element to the next input element on the form, then we have also to handle the possibility of users want to save the data on the form without having to press Enter key many times in order to move the cursor to the Submit button and then press Enter.
In other words, we have to handle the possibility of users want to save data regardless the cursor position on the form. For example, one of your forms has 9 input elements on it. Let's say now your mouse cursor is located at the third input element. In the normal condition, if you have been implementing my customization in the article above, then you have to press the Enter key for about 8 more times in order to move the cursor to forth, fifth, sixth, seventh, eighth, ninenth input element, the Submit button, and lastly, press the Submit button. Yes, press Enter for eight more times! That's not a good condition, right? Imagine if your form has 20 or 30 input element, then you have to press Enter for many times, until the mouse cursor focus on the Submit button, and then press Enter one more time to submit the data on the form.
So, after implementing the customization below, then you might press F2 key in your keyboard in order to save the data on the form directly, even your mouse cursor is located on any input element. Please note that the customization below depends on the customization in the article above. In other words, if you want to implement the customization below, then make sure you have implemented the customization in the article above first.
[hidepost]
- Open your PHPMaker project (.pmp) file using PHPMaker application.
-
Click one of your desired tables in the left pane (in this example, we are using cars table from the demo project. Click on Code (Server Events, Client Scripts and Custom Templates) tab. Expand the following: Client Scripts -> Table-Specific -> Add Page -> Client Script, and make sure you have the 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] then replace it with the following code: [code lang="php"] $(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 } } else if(event.which == 113) { // F2 key press $('#fcarsadd').submit(); // Don't forget to adjust "facarsadd" with your form id } }); $('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 } } else if(event.which == 113) { // F2 key press $('#fcarsadd').submit(); // Don't forget to adjust "facarsadd" with your form id } }); $('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 } } else if(event.which == 113) { // F2 key press $('#fcarsadd').submit(); // Don't forget to adjust "facarsadd" with your form id } }); }); [/code] As you can see from the replacement code above, we have added the related code in order to check whether users are pressing <strong>F2</strong> key. See the part of this code: [code lang="php"] } else if(event.which == 113) { // F2 key press $('#fcarsadd').submit(); // Don't forget to adjust "facarsadd" with your form id }
So, make sure also you have adjusted the form id. In the example above, we are using fcarsadd since we are handling the F2 key press possibility on the Add form that belongs to cars table.
-
Click one of your desired tables in the left pane (in this example, we are using cars table from the demo project. Click on Code (Server Events, Client Scripts and Custom Templates) tab. Expand the following: Client Scripts -> Table-Specific -> Edit Page -> Client Script, and make sure you have the following code:
// 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] then replace it with the following: [code lang="php"] $(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 } } else if(event.which == 113) { // F2 key press $('#fcarsedit').submit(); // Don't forget to adjust "facarsedit" with your form id } }); $('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 } } else if(event.which == 113) { // F2 key press $('#fcarsedit').submit(); // Don't forget to adjust "facarsedit" with your form id } }); $('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 } } else if(event.which == 113) { // F2 key press $('#fcarsedit').submit(); // Don't forget to adjust "facarsedit" with your form id } }); }); [/code] As you can see from the replacement code above, we have added the related code in order to check whether users are pressing <strong>F2</strong> key. See the part of this code: [code lang="php"] } else if(event.which == 113) { // F2 key press $('#fcarsedit').submit(); // Don't forget to adjust "facarsedit" with your form id }
So, make sure also you have adjusted the form id. In the example above, we are using fcarsedit since we are handling the F2 key press possibility on the Edit form that belongs to cars table.
- Finally, re-generate your script files using PHPMaker as always.
[/hidepost]
Leave a Reply
You must be logged in to post a comment.