Customizing Submit Buttons in Websites that Generated by PHP Report Maker 6.0.0

For those of you who have been implementing the customization I made and wrote it in article How to Customize Submit Button in Websites that Generated by PHPMaker 9.0.2, then this following customization is definitely for you. We will customize Submit buttons in websites that generated by PHP Report Maker.

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 Login page, the validation return false value after this button is clicked, then this button will automatically be enabled again (as the proper condition that we want), so that user will be able to click the button again.

The most important thing you should know 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.

[hidepost]

1. First of all, make sure you have not opened your PHPMaker project (.pmp) file. Open your C:\Program Files\PHP Report Maker 6\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\PHP Report Maker 6\scr\phpcodebase.xml file, and find this code:

   Client Scripts -> Table-Specific -> Report Page -> Startup Script of all reports, is to simplify the customization. Imagine if you have many reports!

3. Open your \Script\rpt-extfilter.php file, and find this code: [code lang="php"]     [/code] then replace it with the following code: [code lang="php"]     [/code]
4. Still in that \Script\rpt-extfilter.php file, find again this code: [code lang="php"]