This following article will show you how to hide the certain fields based on the selected value in a ComboBox or Select Option control in Add pages of web applications that generated by PHPMaker. This is very useful if you want to hide the certain elements in the form of Add pages based on the certain values only in a ComboBox. Hiding the element means that we will hide the whole row of the elements; the control itself and also the Label or Caption of it.
For simplicity, let's use the following example. Let's say I have a table named users. In that table, I have a field named User_Level which is displayed as a ComboBox control in one of my Add pages. I want to hide the field (as I mentioned before, hiding field means the whole row) named Report_To which is located below of that ComboBox, if users select the item in the User_Level that has the value of "1". Otherwise, just display the Report_To field normally.
I will show you how easily we can achieve it only by using jQuery. In other words, we will not modify any generated script files as I always recommend you all the time. We will use Client Scripts section of PHPMaker, so that you can use this technique for your other future PHPMaker project. So simple, yet so powerful.
[hidepost]
- Run your PHPMaker project (.pmp) file using PHPMaker application.
- Go to Tools -> Advanced Settings and then make sure you have already given a checked mark at the Local YUI/jQuery files. I recommend this setting, especially if your web application will not connect to the Internet to use the live YUI/jQuery files.
-
Click on that users table from Database pane in the left side of PHPMaker application, go to the following path: Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script, and then insert the following code to the editor code in the right pane:
$(document).ready(function(){ $("#x_User_Level").change(function() { var str = $("option:selected", this); if (this.value == "1") { $("#r_Report_To").hide(); } else { $("#r_Report_To").show(); } }); });
As we can see from that code above, r_Report_To is the ID of the row (TR) of the Report_To field in the form of Add page. You can compare the prefix of it (which is started by r character) with the ID of the ComboBox which is started by x character.
- Finally, re-generate your script files using PHPMaker as always.
[/hidepost]
Claudiu Banut says
Great, thank you. It really helped me in Can I ask you how to do the same thing but to check the number of digits in a textbox with int values? If ..lets say..the user enters less than 7 digits to give a message.
Masino Sinaga says
I suggest you to use the jQuery plugin named autoNumeric to validate the number of digits or to allow user to input the certain format of number.
Ralph Vanore says
Is it possible to do this in PHPmaker 11 with a radio button instead of a combo box?
Masino Sinaga says
For radio button, please go to this article: http://www.masinosinaga.com/phpmaker/menampilkan-textbox-saat-radio-button-terpilih-di-aplikasi-web-dari-phpmaker/ Sorry if the article is in Indonesia. However, you can translate it into English using Google.
Ralph Vanore says
This is great thanks! Is it also possible to achieve this same thing with a checkbox? Thanks again!
Masino Sinaga says
Hi Ralph, please check this out: http://www.masinosinaga.com/phpmaker/menampilkan-textbox-saat-checkbox-tercentang-di-aplikasi-web-dari-phpmaker/
Anthony Percivalle says
Thank you!!! can i just add that if you use this and find that your values are not populating when the page loads you might want to trigger the change event on page load for all fields.
$(‘#x_fieldname’).trigger(‘change’);
Masino Sinaga says
If you find it is useful and working, then why not? It’s fine for yours.
saleh alayafi says
hello
Hide fields according to numbers 10,11,12 Other than that it shows all
$(document).ready(function(){
$$(“#r_Video”).show();
$(“#r_Video2”).show();
$(“#r_pdf”).show();
//Hide fields according to numbers 11,12,13 Other than that it shows all
$(“#x_Competitions_name”).change(function() {
var str = $(“option:selected”, this);
if (this.value == “10”) {
(“#r_Video”).hide();
$(“#r_Video2”).hide();
$(“#r_pdf”).hide()
} else if (this.value == “11”) {
$(“#r_Video”).hide();
$(“#r_Video2”).hide();
$(“#r_pdf”).hide();
} else if (this.value == “12”) {
$(“#r_Video”).hide();
$(“#r_Video2”).hide();
$(“#r_pdf”).hide();
} else {
$(“#r_Video”).show();
$(“#r_Video2”).show();
$(“#r_pdf”).show();
}
});
});
What is correct in writing the code because it did not work for me .. I think my idea reached you … Use Google for translation I apologize for the mistakes
Masino Sinaga says
This has nothing to do with Masino Extensions. You should always post this question to PHPMaker Discussion Forum. Your question will be answered in there.
saleh alayafi says
Thank you very much
Are you him : mobhar
https://www.hkvforums.com/viewtopic.php?f=4&t=49512&p=156555&hilit=saleh#p156555
Masino Sinaga says
Yep. That’s me.
saleh alayafi says
Thank you very much
Are you him : mobhar
saleh alayafi says
Is it possible to use plugins for my project?
i need Buy Added:
Does it have additional support for the videos?
Masino Sinaga says
Which plugin did you mean?
saleh alayafi says
Masino Extensions for PHPMaker 2021
Is PHPMaker 2020 supported?
Note that I have a license PHPMaker 2021
But I had problems with PHPMaker 2021
Masino Sinaga says
Masino Extensions for PHPMaker 2020: http://www.ilovephpmaker.com/wpdm-package/masino-extensions-for-phpmaker-2020-all-in-one/
saleh alayafi says
Hello
I looked for mail for you here on your site but I could not find it
Therefore, I will ask you to add a special one
1- Before completing the registration process, verification will be by sending a text message on the mobile phone
2- When the password is lost, it will be requested via the mobile via text message
I have a messaging service provider and sending codes
Can you do that
Please respond to the mail and details of the required amount
sale1h@hotmail.com
Mame Ndiack WANE says
Hello, I really need your help. With phpmaker 2021, locally, all the links work correctly but when I upload my application,
I cannot modify or see the details of the data. Every time I try to edit or see the details (View) it redirects me to the default page.
Thank you
Masino Sinaga says
Hi Mame,
I will answer this question privately to your email. Please check your email within a few minute.