How to Disable Submit Button After Clicked with jQuery in Websites Generated with PHPMaker 8.0.3

In order to prevent the double submission in a form, then we should disable the submit button once it has been clicked by the users. Everyone agrees about that, right? So, we have to handle this situation in the pages that contains form and the submit button. Fortunately, most of the buttons that generated by PHPMaker (such as OK or Cancel or Confirmation button) have the same type as the submit button, so they will be automatically be disabled too if we handle this. In addition to preventing the occurrence of double submission, this trick also will make your web applications become more professional for your users.

This article will show you how you can disable the submit button after clicked, and then enabling it again if the validation process return false. Confused about "enabling it again"? Okay, here is the explanation. Actually, there are two possibilites that could be happened after the disabling process. The first possibility, system will continue to the submission process without any error since all data has been validated properly. The second possibility, system will hold the submission if it found error(s) after the validation process. Usually, when the second condition is happened, the submit button(s) is (are) still disabled, whereas that submit button should be automatically enabled again. Unlike most programmers are still doing that unwanted condition, now I have found the solution how to enable that submit button back again if the second condition above is met.

This disabling technique is using jQuery. The reason why I am using jQuery, since it uses the simpler syntax, yet it is so powerful to recognize the button type in all forms in a page. So we will customize the PHPMaker template files. Since we customize the template files, then you have to always enable the jQuery Library extension from PHPMaker application. Now you can learn how to use jQuery in order to disable the submit button in PHPMaker template easily and working as well as we want. Of course, we won't forget to enable it back again if the validation process return false, so users will be able to click that submit button again (don't forget to handle the double-submission for that case).

All we have to do is customizing the PHPMaker template file and adding some code into the Client Scripts section of PHPMaker. In other words, we do not modify any generated script files.

Please click on the following image below to watch the demo:

[hidepost]

1. First of all, we will customize the submit button in the add script (template) file. So, open your /Script/add-script file, and find this code:

   <!--## If bTblAddConfirm Then ##-->
   <?php if ($<!--##=gsTblVar##-->->CurrentAction <> "F") { // Confirm page ?>
   

   before the first line of that code, please insert the following code:

   <script language="JavaScript" type="text/javascript">
   <!--
   // Prevent form double-submission, modified by Masino Sinaga, February 9, 2012
   $('form').submit(function(){
     $('input&#91;type=submit&#93;', this).attr('disabled', 'disabled');
   });
   //-->
   </script>
   

2. Next, we will customize the edit script. Open your /Script/edit-script.php file, and find this code:

   <!--## If bTblCheckConcurrentUpdate Then ##-->
   <?php if ($<!--##=gsTblVar##-->->UpdateConflict == "U") { // Record already updated by other user ?>
   

   before the first line of that code, please insert this following code:

   <script language="JavaScript" type="text/javascript">
   <!--
   // Prevent form double-submission, modified by Masino Sinaga, February 9, 2012
   $('form').submit(function(){
     $('input&#91;type=submit&#93;', this).attr('disabled', 'disabled');
   });
   //-->
   </script>
   

3. Last step for template files. We will also customize the delete script. Open your /Script/delete-script.php file, and find this code:

   <input type="submit" name="Action" id="Action" value="<?php echo ew_BtnCaption($Language->Phrase("DeleteBtn")) ?>" />
   

   before the that line, please insert this following code:

   <script language="JavaScript" type="text/javascript">
   <!--
   // Prevent form double-submission, modified by Masino Sinaga, February 9, 2012
   $('form').submit(function(){
     $('input&#91;type=submit&#93;', this).attr('disabled', 'disabled');
   });
   //-->
   </script>
   

4. After customizing the template files, now open your PHPMaker project (.pmp) file using PHPMaker application. Click on your desired table, and then click on the Server Events/Client Scripts tab. Afterwards, go to Client Scripts -> Table-Specific -> Add/Copy Page -> Client Script, and please insert the following code into the code editor in the right side:

   $(document).ready(function(){
     $("input").change(function(){
       $('input[type=submit]').removeAttr("disabled");    
     });            
     $("select").change(function(){
       $('input[type=submit]').removeAttr("disabled");    
     });  
     $("textarea").change(function(){
       $('input[type=submit]').removeAttr("disabled");    
     });  
     $("radio").change(function(){
       $('input[type=submit]').removeAttr("disabled");    
     });  
     $("checkbox").change(function(){
       $('input[type=submit]').removeAttr("disabled");    
     });  
   });
   

   That code will make the submit button will be enabled again whenever users are changing the data in any ComboBox (select), TextBox (input), TextBox Multiline (textarea), Option Button (radio), and CheckBox (checkbox).

   Please note that you have to repeat this step if you want to implement it in another table/view in Table Setup of your PHPMaker application.

5. Repeat the step number 4 above for the following section: Client Scripts -> Table-Specific -> Edit Page -> Client Script.
6. Finally, save your project, and then re-generate your script files using PHPMaker as usual.

[/hidepost]