How to Make Submit Button Which Will be Disabled on Click Event in Web Applications that Generated by PHPMaker 10.0.2

Since PHPMaker 10, now we are able to add the ability of disabling Submit button on click event easily and quickly. This is very useful if you want to create a custom form which contains a submit button, and after user clicked the button, then it will be disabled so that will prevent double-click or double submission.

This following trick will show you how to make the Submit button which will be disabled on click event. In this example, we will add the custom form based on the generated blank page. You can implement this trick for any custom pages you want to include into your web applications. There are some HTML, PHP, and Javascript code we will insert.

Of course, alternatively of the example above, you can insert the code via Server Event and Client Scripts. So, no need to customize the generated code, and no need to customize the template file. However, for simplicity, let's use the generated blank page to try the code. You will see how powerful and flexible it is!

[hidepost]

1. Before generating the script files, make sure you have already selected Generate a blank page item under the Generate tab in order to generate the blank page.
2. Click on the Generate button, and make sure from Other files section in the Generate dialog window, at least you have selected blankpage.php item.
3. Now click on the Generate button to generate the blank page.
4. Rename the generated blankpage.php file, for example, becomes: testdisablesubmit.php.
5. Open testdisablesubmit.php file by using your favorite text editor, then find the following code:

   <!-- Put your custom html here -->
   

   Below that code, please insert the following code:

   <form id="ftestpage" name="ftestpage" method="post" action="<?php echo ew_CurrentPage() ?>" class="ewForm">
   	<div><input name="txtTest" id="txtTest" type="text" value="<?php echo @$_POST["txtTest"] ?>"></div>
   	<div><button class="btn btn-primary ewButton" name="btnAction" id="btnAction" type="submit">Please Click This Button</button></div>
   	<?php 
   	if (isset($_POST["txtTest"]) && $_POST["txtTest"] != "") {
   		echo "<br><br>Thank you, you have just sent <strong>" . $_POST["txtTest"]."</strong>"; 
   	}
   	?> 
   </form>
   
   <script type="text/javascript">
   <!--
   // Form object
   var ftestpage = new ew_Form("ftestpage");
   ftestpage.Init();
   <?php if (EW_MOBILE_REFLOW && ew_IsMobile()) { ?>
   ew_Reflow();
   <?php } ?>
   //-->
   </script>
   

   As you can see from that code above, we have to make sure that we have already given the name and the id of the form (in that example, it is ftestpage). Afterwards, make sure also we have already added the Javascript code that related to ew_Form() function calling, also we have to call the Init() that belongs to the form object. This is important so that the submit button will be able to disable itself right after user clicking on the button.

6. Save the change of the file, and call that testdisablesubmit.php file just like you call the certain .php page via browser. For example, my web application root address is: http://localhost/test/, then go type this address via your browser: http://localhost/test/testdisablesubmit.php
7. Now you should see in the page, there is a new Text Box control and a Submit button which has the label Please Click This Button. Just type any value in the textbox, and then click on the button, then watch the effect on the button. It should be automatically disabled right after you click the button.
8. Of course, you may try to play with the Javascript code. For example, remove all the Javascript block code above, and then watch what would be happened. Now we can take a conclusion, if we want to make the ability of disabling button on click event in a web application that generated by PHPMaker 10, then we have to use the Javascript code above.

[/hidepost]