How to Search Data based on the Select Option Change in the Web Applications that Generated by PHPMaker 10

This following trick will show you how we can search data in Advanced Search based on change event on the Combobox or Select Option element control. In other words, the search process will not be triggered by on click event that belongs to the submit button type, but triggered by on change event that belongs to the Combobox control.

This is very useful to change the business logic in the Advanced Search so that your web applications users will not have to click on Search button to begin the search process. This will streamline the search process without having to scroll down the page to the bottom, moreover you have so many element in the Advanced Search page.

This following trick also will show you how we can add an additional functionality that regarding the search process by inserting a little code of jQuery under the Client Scripts section of PHPMaker. As always, no need to customize the template nor the generated code.

Let’s say in this case we have a Combobox control named Kabupaten and the name of the form in that Advanced Search page is fkecamatansearch. Simply write the following code under Client Scripts -> Table-Specific -> Search Page -> Startup Script:

$(document).ready(function(){
    $("#x_Kabupaten").bind("change", function() { 
        if ($("#x_Kabupaten").val()) {
            $("#fkecamatansearch").trigger("submit");
        }
    });
});

If you want to use the similar code for the fields that located on Extended Search in List page, then simply write the following code under Client Scripts -> Table-Specific -> List Page -> Startup Script:

$(document).ready(function(){
    $("#x_Kabupaten").bind("change", function() { 
        if ($("#x_Kabupaten").val()) {
            $("#fkecamatanlistsrch").trigger("submit");
        }
    });
});

As you can see, the main difference between Advanced Search and Extended Search in the List page is the form name. In Advanced Search, the form name is ended with search, whereas in the List page the form name is ended with listsrch.

Want to try the demo? Just click here!

Comments

Leave a Reply