How to Customize Submit Button in Websites that Generated by PHPMaker 9.0.2

Are you tired of seeing the boring standard submit buttons in your web applications that generated by PHPMaker? Currently, PHPMaker generates submit buttons without adding the certain style so it is still using the standard button style just like we saw in Windows Standard button style. Now, you will never see that boring buttons again! This following modification will customize your submit buttons in websites that generated by PHPMaker. By implementing the customization below, then you will see the hover and pressed effects on the button when users are hovering mouse and clicking on it. Have you ever seen the submit button in the Login Facebook page? Well, this customization will make the look of your submit buttons similar to that.

When user clicks on the submit button or presses Enter key (no matter in which page it is located), then it will automatically be disabled by system (of course, in order to prevent the double submission). If, for example, in a edit or add page, the validation return false value after this button is clicked, then this button will be automatically enabled again (as the proper condition that we want), so that user will be able to click the button again. The most important thing about the disabled status, this customization has included the style for disabled state. You will see that the color and the state of button is truly disabled. You will see the beauty of the disabled button, just like you usually see in a real world.

This customization is every useful if you want to change the style of submit buttons without having to replace all input syntax -- that usually used for button in a html form -- become using button or a href link syntax. Yes, many css button techniques in Internet I had found were using the a href link and button syntax. Most of them are not using or optimizing the existing input type syntax. Moreover, they don't handle about how to create disabled style in the css file! So, this following customization I created will optimize the using of the input type syntax. Also, you don't need much effort to customize the submit buttons as you probably doing until now. Besides that, this will make the look of your web applications become more beautiful and professional for your users.

Actually, only a small customization, yet so powerful. Generally, you simply insert the class="msButton" and the disabling technique codes in your input type which has button type, and then define the related css code. You never thought about the result, including myself. Now, what are you waiting for? Get the best advantage from this customization right now!

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.

Updated on June 17, 2013: This customization below has been handled by using MasinoFixedWidthSite extension. You don’t need to implement the customization below if you use my extensions together with the original PHPMaker Template and Extension files.

[hidepost]

1. First of all, make sure you have not opened your PHPMaker project (.pmp) file. Open your C:\Program Files\PHPMaker 9\themes\ew.css file, and find this code:

   /*END_SYSTEM_STYLES*/
   

   before that line, please insert the following code:

   input.msButton:active {
   -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
       -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
       box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
       background: #2E5481;
       border: solid 1px #203E5F;
   }
   
   [disabled] {
       padding: 3px 14px;
       background: #DEDEDE;
       color: #CACACA;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       border-radius: 4px;
       border: solid 1px #CACACA;
       text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
       -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(255, 255,255, 0.2);
       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
       -webkit-transition-duration: 0.2s;
       -moz-transition-duration: 0.2s;
       transition-duration: 0.2s;
       -webkit-user-select:none;
       -moz-user-select:none;
       -ms-user-select:none;
       user-select:none;
   }	
   
   input.msButton:hover {
       background: #356094;
       border: solid 1px #2A4E77;
       text-decoration: none;
   	cursor: pointer;
   }
   
   input.msButton{
       padding: 3px 14px;
       background: #4479BA;
       color: #FFF;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       border-radius: 4px;
       border: solid 1px #20538D;
       text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
       -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
       -webkit-transition-duration: 0.2s;
       -moz-transition-duration: 0.2s;
       transition-duration: 0.2s;
       -webkit-user-select:none;
       -moz-user-select:none;
       -ms-user-select:none;
       user-select:none;
   }
   

2. Make sure you have closed your PHPMaker application. Open your C:\Program Files\PHPMaker 9\scr\phpcodebase.xml file, and find this code:

   phpcodebase.xml file and not adding the code in the Client Scripts -> Table-Specific -> Add/Copy Page and Edit Page -> Startup Script of all tables, is to simplify the customization. Imagine if you have many tables!

3. Open your \Script\add-script.php file, and find this code: [code lang="php"] ->CurrentAction <> "F") { // Confirm page ?> [/code] before the first line of that code, please insert the following code: [code lang="php"] [/code]
4. Still in that \Script\add-script.php file, find again this code: [code lang="php"] ->CurrentAction <> "F") { // Confirm page ?> " /> " /> " /> " /> [/code] then replace it with the following code: [code lang="php"] ->CurrentAction <> "F") { // Confirm page ?> " onclick="this.form.a_add.value='F';this.className='msButton:disabled';" /> " onclick="this.form.a_add.value='X';this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> [/code]
5. Open your \Script\changepwd.php file, and find this code: [code lang="php"] " /> [/code] then replace it with the following code: [code lang="php"] " onclick="this.className='msButton:disabled'" /> [/code]
6. Still in that \Script\changepwd.php file, find again this code: [code lang="php"] [/code] after the last line of that code, please insert the following code: [code lang="php"] [/code]
7. Open your \Script\delete-script.php file, and find this code: [code lang="php"] " /> [/code] then replace it with the following code: [code lang="php"] " onclick="this.className='msButton:disabled'" /> [/code]
8. Still in that \Script\delete-script.php file, then find again this code: [code lang="php"] [/code] after that line, please insert the following code: [code lang="php"] [/code]
9. Open your \Script\edit-script.php file, and find this code: [code lang="php"] ->UpdateConflict == "U") { // Record already updated by other user ?> [/code] before that line, please insert the following code: [code lang="php"] [/code]
10. Still in that \Script\edit-script.php file, find again this code: [code lang="php"] ->UpdateConflict == "U") { // Record already updated by other user ?> " /> " /> ->CurrentAction <> "F") { // Confirm page ?> " /> " /> " /> " /> [/code] then replace it with the following code: [code lang="php"] ->UpdateConflict == "U") { // Record already updated by other user ?> " onclick="this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> ->CurrentAction <> "F") { // Confirm page ?> " onclick="this.form.a_edit.value='F';this.className='msButton:disabled'" /> " onclick="this.form.a_edit.value='X';this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> [/code]
11. Open your \Script\forgotpwd.php file, and find this code: [code lang="php"] " /> [/code] then replace it with the following code: [code lang="php"] " onclick="this.className='msButton:disabled'" /> [/code]
12. Still in that \Script\forgotpwd.php file, find again this code: [code lang="php"]
    [/code] after the last line of that code, then insert the following code: [code lang="php"] [/code]
13. Open your \Script\list-script-search.php file, and find this code: [code lang="php"]
    [/code] before that line, please insert the following code: [code lang="php"] [/code]
14. Still in that \Script\list-script-search.php file, find again this code: [code lang="php"] " /> [/code] then replace it with the following code: [code lang="php"] " onclick="this.className='msButton:disabled'" /> [/code]
15. Open your \Script\login.php file, and find this code: [code lang="php"] " /> [/code] then replace it with the following code: [code lang="php"] " onclick="this.className='msButton:disabled'" /> [/code]
16. Still in that \Script\login.php file, find again this code: [code lang="php"] "> [/code] then replace it with the following code: [code lang="php"] "> [/code]
17. Still in that \Script\login.php file, find again this code: [code lang="php"]
    [/code] after the last line of that code, please insert the following code: [code lang="php"] [/code]
18. Open your \Script\register.php file, and find this code: [code lang="php"] ->CurrentAction <> "F") { // Confirm page ?> " /> " /> " /> " /> [/code] then replace it with the following code: [code lang="php"] ->CurrentAction <> "F") { // Confirm page ?> " onclick="this.form.a_register.value='F'; this.className='msButton:disabled'" /> " onclick="this.form.a_register.value='X'; this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> [/code]
19. Still in the \Script\register.php file, find again this code: [code lang="php"] " onclick="this.form.a_register.value='I';"> [/code] then replace it with the following code: [code lang="php"] " onclick="this.form.a_register.value='I'; this.className='msButton:disabled'"> [/code]
20. Still in that \Script\register.php file, find again this code: [code lang="php"] [/code] after the last line of that code, please insert the following code: [code lang="php"] [/code]
21. Open your \Script\search-script.php file, and find this code: [code lang="php"] " /> " onclick="ew_ClearForm(this.form);" /> [/code] then replace it with the following code: [code lang="php"] " onclick="this.className='msButton:disabled'" /> " onclick="ew_ClearForm(this.form);" /> [/code]
22. Still in that \Script\search-script.php file, and find this code: [code lang="php"] [/code] after that line, please insert the following code: [code lang="php"] [/code]
23. Open your \Script\update-script.php file, and find this code: [code lang="php"] ->CurrentAction <> "F") { // Confirm page ?> " /> " /> " /> " /> [/code] then replace it with the following code: [code lang="php"] ->CurrentAction <> "F") { // Confirm page ?> " onclick="this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> [/code]
24. Still in that \Script\update-script.php file, find again this code: [code lang="php"] [/code] after that line, please insert the following code: [code lang="php"] [/code]
25. Open your \Script\userpriv.php file, and find this code: [code lang="php"]

    > [/code] then replace it with the following code: [code lang="php"] > [/code] Make sure you do not miss or skip this step becuase this will fix the problem in userpriv.php file since the form tag should be located outside of or before the table open tag. Still in that \Script\userpriv.php file, find again this code: [code lang="php"] "->Disabled ?> /> [/code] then replace it with the following code: [code lang="php"] "->Disabled ?> onclick="this.className='msButton:disabled'" /> [/code] Open your PHPMaker project (.pmp) file using PHPMaker, and then go to Code (Server Events, Client Scripts and Custom Templates) tab, expand the following: Client Scripts -> Other -> Login Page -> Startup Script, then insert the following code into the right pane: [code lang="php"] $(document).ready(function(){ $("input").change(function(){ $('input[type=submit]').removeAttr("disabled"); $('input[type=submit]').addClass("msButton"); $('input[type=reset]').addClass("msButton"); }); }); [/code] This code will enable the Login button and then assign the class to it including the Cancel or reset type button. Still from PHPMaker application, and similar to the previous step, go to Client Scripts -> Other -> Registration Page -> Startup Script, then insert the following code into the right pane: [code lang="php"] $(document).ready(function(){ $("input").change(function(){ $('input[type=submit]').removeAttr("disabled"); $('input[type=submit]').addClass("msButton"); }); }); [/code] Still from PHPMaker application, and similar to the previous step, go to Client Scripts -> Other -> Change Password Page -> Startup Script, then insert the following code into the right pane: [code lang="php"] $(document).ready(function(){ $("input").change(function(){ $('input[type=submit]').removeAttr("disabled"); $('input[type=submit]').addClass("msButton"); }); }); [/code] Still from PHPMaker application, and similar to the previous step, go to Client Scripts -> Other -> Password Recovery Page -> Startup Script, then insert the following code into the right pane: [code lang="php"] $(document).ready(function(){ $("input").change(function(){ $('input[type=submit]').removeAttr("disabled"); $('input[type=submit]').addClass("msButton"); }); }); [/code] Finally, re-generate your script files using PHPMaker as always. [/hidepost] How to Add Layout Box Shadow in Websites that Generated by PHPMaker 9.0.2 How to Get Root or Homepage URL of Websites that Generated by PHPMaker 9.0.2 Comments keithh0427 says August 11, 2012 at 7:31 am I’m using 9.0.3 and I cannot match the search criteria for the steps that contain . keithh0427 says August 11, 2012 at 7:32 am the closing body element. Masino Sinaga says August 11, 2012 at 11:02 pm I see. Please implement the customization from the following articles: – How to Customize Login Page in Websites that Generated with PHPMaker 9.0.1 – How to Customize Registration Page and Add “Terms and Conditions” Using PHPMaker 9.0.1 – How to Customize Forgot Password Page in Websites that Generated with PHPMaker 9.0.1 – How to Customize Change Password Page in Websites that Generated with PHPMaker 9.0.1 In other words, the closing body tag was came from those customizations. Demo Website Demo of I Love PHPMaker 2020 (MasinoExtensions). Indonesia Post Offices. Stock Inventory Management. Demo of PHPMaker + PHP Report Maker Another Demo The following template are not available in this site (must be purchased separately) PHPMaker v2018 Horizontal Vertical Template. PHPMaker v2017 Horizontal Vertical Template. Demo Explanation Stock Inventory Management is the good project for your reference, since it uses the real example in the real world. Many useful features you can use from this project, such as how to add the Thousand and Decimal separator character, and also how to calculate multiple row in Grid-Add when End-Users are entering data into the Grid-Add mode. Categories Customize Template (103) General (3) PHP Report Maker (17) PHP Report Maker Extensions (2) PHPMaker Extensions (76) Tips and Trick (72) Articles based on version PHPMaker 2020 PHPMaker 2019 PHPMaker 2018 PHPMaker 2017.0.7 PHPMaker 12.0.7 PHPMaker 11.0.6 PHPMaker 10.0.5 PHPMaker 9.2.0 PHPMaker 8.0.3 PHP Report Maker 12