This time I will show you how to disable or enable another control based on the Radio Button onClick event in websites that generated with PHPMaker. Again, we will use jQuery for this purpose. Fortunately, PHPMaker has given the id for each control that generated by it, so we can optimize this id for using jQuery easily and quickly. This feature will be very useful when you want to allow your users choose the certain selection from the Select Option (ComboBox) control if they have chosen "Yes" on the related Radio Button before. In addition, you will also learn how to implement jQuery in the websites that generated by PHPMaker. You don't have to modify the generated code since we will use the Client Script event for this.
So let's use the following scenario in order to give you the idea how it works. In a form, we have the Radio Button (Option Button) which has the same name with its id as "x_Apakah_Online" and Select Option (ComboBox) also which has the same name with its id as "x_Media_Koneksi" (that format name has been given by PHPMaker). The available values of the Radio Button are "Yes" (value = "Y") and "No" (value = "N"). Next, when your users click on the "Yes" option, then the Select Option (ComboBox) will be enabled, whereas when your users click on the "No" option, then the Select Option (ComboBox) will be disabled.
When this form is loaded for the very first time, then the Select Option (ComboBox) is disabled if the page is in the Add mode. In the other side, if the page is in the Edit mode, then it depends on the selected value of the Radio Button. If the selected value of Radio Button is "Yes", then the ComboBox will be automatically enabled, otherwise it will be disabled when the form is loaded for the very first time.
All we have to do is 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]
- Open your .pmp file using PHPMaker application as usual.
- Make sure you have already enabled the jQuery Library extension from the Tools -> Extensions menu.
-
Now we want to implement it in the Add Page. Click on one of the tables you desire, then click on the Server Events/Client Scripts tab. Next, go to Client Scripts -> Table-Specific -> Add/Copy Page -> Client Script, and then insert the following code into the code editor in the right side:
// WARNING: Please do not forget to adjust the "x_Media_Koneksi" and "x_Apakah_Online" with yours. $(document).ready(function() { $('#x_Media_Koneksi').attr('disabled','disabled'); $("input[name='x_Apakah_Online']").change(function () { var selection = $(this).val(); if (selection == 'Y') { $('#x_Media_Koneksi').removeAttr('disabled'); } else { $('#x_Media_Koneksi').attr('disabled','disabled'); $('#x_Media_Koneksi')[0].selectedIndex = 0; } }); }); -
Next step, we will also implement it into the Edit page. Go to Client Scripts -> Table-Specific -> Edit Page -> Client Script, and then insert the following code into the code editor in the right side:
// WARNING: Please do not forget to adjust the "x_Media_Koneksi" and "x_Apakah_Online" with yours. $(document).ready(function() { $("input[name='x_Apakah_Online']").ready(function () { var checkselection = $(this).val(); if (checkselection == 'Y') { $('#x_Media_Koneksi').removeAttr('disabled'); } else { $('#x_Media_Koneksi').attr('disabled','disabled'); } }); $("input[name='x_Apakah_Online']").change(function () { var selection = $(this).val(); if (selection == 'Y') { $('#x_Media_Koneksi').removeAttr('disabled'); } else { $('#x_Media_Koneksi').attr('disabled','disabled'); } }); }); - Finally, re-generate your .php script files, especially for the Add and Edit page of the related table.
[/hidepost]
I have a different approach, not using jQuery, i wonder what you think:
I have “scope” field which is ENUM(‘HQ’,’Regional’,’Country’)
Logic: based on the radio selection of “scope” field, corresponding fields on the forms will be disabled/enabled
1. Fields –> Scope –> custom attribues
“onclick=\”{scopeResult(this.value);}\””
2. Client Scripts –> Global –> pages with header/footer –> Global Code
function displayResult(value)
{
if (value==’HQ’)
{
document.getElementById(‘x_office_hq_id’).disabled = false;
document.getElementById(‘x_office_regional_id’).disabled = true;
document.getElementById(‘x_country_id’).disabled = true;
document.getElementById(‘x_region_id’).disabled = true;
}
else if (value==’Regional’)
{
document.getElementById(‘x_office_hq_id’).disabled = true;
document.getElementById(‘x_office_regional_id’).disabled = false;
document.getElementById(‘x_country_id’).disabled = true;
document.getElementById(‘x_region_id’).disabled = true;
}
else if (value==’Country’)
{
document.getElementById(‘x_office_hq_id’).disabled = true;
document.getElementById(‘x_office_regional_id’).disabled = true;
document.getElementById(‘x_country_id’).disabled = false;
document.getElementById(‘x_region_id’).disabled = false;
}
}
3. Client Scripts –>Table specific–> Add/Copy page–> startup script
document.getElementById(‘x_office_hq_id’).disabled = true;
document.getElementById(‘x_office_regional_id’).disabled = true;
document.getElementById(‘x_country_id’).disabled = true;
document.getElementById(‘x_region_id’).disabled = true;
4. Client Scripts –>Table specific–> Add/Copy page- –>Form_CustomValidate –> inside function(fobj)
if (fobj.elements[“x_scope”][1].checked && fobj.elements[“x_office_hq_id”].value == ” )
{
return ew_OnError(this, fobj.elements[“x_office_hq_id”], “Please enter the HQ desk!”); // return false if invalid
}
else if (fobj.elements[“x_scope”][2].checked && fobj.elements[“x_office_regional_id”].value == ” )
{
return ew_OnError(this, fobj.elements[“x_office_regional_id”], “Please enter the Regional office!”); // return false if invalid
}
else if (fobj.elements[“x_scope”][3].checked && fobj.elements[“x_country_id”].value == ” )
{
return ew_OnError(this, fobj.elements[“x_country_id”], “Please enter the Country!”); // return false if invalid
}
5. Client Scripts –>Table specific–> Edit page- –>Form_CustomValidate –> inside function(fobj)
if (fobj.elements[“x_scope”][1].checked && fobj.elements[“x_office_hq_id”].value == ” )
{
return ew_OnError(this, fobj.elements[“x_office_hq_id”], “Please enter the HQ desk!”); // return false if invalid
}
else if (fobj.elements[“x_scope”][2].checked && fobj.elements[“x_office_regional_id”].value == ” )
{
return ew_OnError(this, fobj.elements[“x_office_regional_id”], “Please enter the Regional office!”); // return false if invalid
}
else if (fobj.elements[“x_scope”][3].checked && fobj.elements[“x_country_id”].value == ” )
{
return ew_OnError(this, fobj.elements[“x_country_id”], “Please enter the Country!”); // return false if invalid
}
Thanks for the feedback. Well, I think by using Javascript will take more line of code rather than using jQuery, even both of them will result the same goal.
Another consideration is, we have to define/call the function from the Custom Attribute of the related field. In the other side, by using jQuery, we do not need to do that. Simply only write the code from the Client Scripts section of PHPMaker.
Hi Masino, I have couple of phpmaker tips I can share with you (and probably you can make them more professional), send me your email. Cheers, Arab
Hi Arab Salem,
Just sent you an email. Thanks.
var checkselection = $(this).val();
returns nothing, you need to use this:
var checkselection = $(“input[name=’x_Apakah_Online’]:checked”).val();
Also, (‘#x_Media_Koneksi’).attr(‘disabled’,’disabled’);
needs $
Hi Arab Salem,
Thanks for bringing the issue about the missing “$” up. I have fixed the related code.
Regarding the checkselection, well, either
or
var checkselection = $("input[name='x_Apakah_Online']:checked").val();are still working, since the following code:
will point/refer to the ready/change function belongs to the following element:
Was wondering if you have something like this that uses dropdown boxes (single select) for the controller and controlled input fields.
Will this work with v9 ?
I have not tested it yet in v9. Have you?
I’d like to test with v9 as well, but I don’t see a jQuery Library extension (either in the out of box options or available as download).. Any ideas ?
Since PHPMaker 9.1.0, the author of PHPMaker said that jQuery always included. Here is the changes log:
2012/11/20 v9.1.0
– Menu for mobile devices
– DOMPDF extension updated
– PHPExcel extension (for registered users) updated and support exporting report by PHPExcel
– jQuery always included
– Automatic expand/collapse search panel when “Initiate search panel as collapsed” enabled
– Allow entering display value separator during AutoSuggest
– CSS classes added to hyperlinks for easier selection by CSS selector
– Allow parent field without lookup table (Dynamic Selection List)
– Not show tooltip if the field value or the tooltip value is empty
– Export to email (send as “HTML”) with embedded images (requires Image Resize extension)
– Allow time input without seconds (client/server side validation)
– Add DisplayValueSeparator and Exportable property for field object (for use with server event)
– Allow using CurrentUserInfo() without User ID Security enabled (for use with server event)
– Add AddUserLevelID() and DeleteUserLevelID() for Security object (for use with server event)
– Fixed: AutoUpdate fields visible in Grid-Add/Edit
– Fixed: setPhrase() method of Language object when “Use DOM XML for Langauge object” enabled
– Fixed: Binary data trimmed
– Fixed: Master record not cleared when using “showmaster=” URL parameter
– Fixed: Non utf-8 characters not recognized by Excel after export
– Fixed: AutoSuggest not work properly in Add Option dialog
– Fixed: AutoSuggest not align properly in search panel (Google Chrome only)
– Fixed: “Required” validator not work with checkbox(es) and select-multiple
– Compatibility with PHP Report Maker 6
– Other minor improvements and fixes
Wanted to “bump” this question again…
Consider an accounting application with a table for setting up a customer record. Very often, the physical address for shipping and billing are different locations. A ‘Y’ / ‘N’ radio selection to specify whether bill to and ship are the same would be awesome. On Y, I can have a trigger in the db auto-populate the fields in the table before insert/before update and take care of it that way. But on a N, selection, I’d like the disabling of the fields in the app to be removed where the user could specify address info for billing….
Doable?
Of course, it is doable.
Do you mind having a look at where I might be going wrong? I’d really appreciate your feedback.
Based on your code above, ‘btst’ is my ‘Y’/’N’ radio button and for now, I’m just trying to disable btAddress1 based on that selection (disabled on Y, enabled on N). Ultimately would like to add btAddress2, btCity, btState, etc. but just want to see it work…
Here’s the customer table specific client script on Add/Copy:
$(document).ready(function() { $('#btAddress1').attr('disabled','disabled'); $("input[name='btst']").change(function () { var selection = $(this).val(); if (selection == 'N') { $('#btAddress1').removeAttr('disabled'); } else { $('#btAddress1').attr('disabled','disabled'); // $('#x_Media_Koneksi')[0].selectedIndex = 0; --->; I think this is for dropdown boxes; btAddress1 is a text box } }); });and here it is from edit:
$(document).ready(function() { $("input[name='btst']").ready(function () { var checkselection = $(this).val(); if (checkselection == 'N') { $('#btAddress1').removeAttr('disabled'); } else { $('#btAddress1').attr('disabled','disabled'); } }); $("input[name='btst']").change(function () { var selection = $(this).val(); if (selection == 'N') { $('#btAddress1').removeAttr('disabled'); } else { $('#btAddress1').attr('disabled','disabled'); } }); });P.S. – I’m running 9.0.4
Please note that the id of the fields on the form that generated by PHPMaker always started by the prefix “x_”. So, instead of using “#btAddress1”, try to use “#x_btAddress1”. In other words, make sure you have checked the id of the element before implementing its jQuery.
Beautiful – works perfectly. Thanks again, Masino!
Masino, the code works perfectly, one question: Lets say I have 1 radio box with Y and N. and another text box. At N, obviously the text box is disabled using your code, but lets take the situation when first was selected Y and text box has a value, and then at edit, I want to select N, using your code it keeps the old values, only the text box is disabled. What is command to, lets say, put “0” value to the disabled text box? Im having problems when I have to work with values in PHPMaker…I know that I have to use “x_row” but I dont know the syntax to make it, lets say..”0″.
Simply try this:
$(document).ready(function() { $('#x_row').val('0'); });Just in case, make sure also to put the following code in your Row_Inserting server event:
if (yourcondition) { // your condition to assign the field with value of 0 $rsnew["yourfieldname"] = "0"; }Thanks.
Is there a solution if you want the select list to allow MULTIPLE selections? I’m finding that as soon as the edit tag properties for the select list are changed to allow multiple selections, the control code fails (i.e. – the select list is ENABLED all the time).
Thanks.
Of course that code above will not work if you are using SELECT with MULTIPLE selections. Keep in mind that the single SELECT will get only one single value at a time, whereas SELECT MULTIPLE will get values from the selected items as an array. Google for “jquery multiple select get value”.
What if I wanted to hide a checkbox based on a radiobutton selection? Would this code work for that as well and in 11?
No. That code above won’t work for hiding a checkbox based on radio button selection. As mentioned, it only works to disable another control based on radio button click.
However, if you want to hide the related control as the example above, then change this:
$('#x_Media_Koneksi').removeAttr('disabled');become:
$('#r_Media_Koneksi').show();Also change this:
$('#x_Media_Koneksi').attr('disabled','disabled');become:
$('#r_Media_Koneksi').hide();