I would suggest having a look at the JSONLOAD event. I have a similar thing on an address input page with a radio button to indicate whether its a House, Flat or Hostel address, each of which requires visually different data entry field labels. The JSONLOAD event responds to the radio button selected and dynamiclly hides or unhides labels and fields as required, I must have borrowed and adpted this from examples in the Manuals, as I'm not a Javascript person.
I've included both the Add page and Edit page event code as they are different I'd recommend doing Add first. Hope this helps.
JSONLOAD Event code for my add page
var ctrl_str2 = Runner.getControl(pageid, 'street2');
ctrl_str2.addStyle('text-transform: capitalize;');
var ctrl = Runner.getControl(pageid, 'area');
ctrl.addStyle('text-transform: capitalize;');
var ctrl = Runner.getControl(pageid, 'town');
ctrl.addStyle('text-transform: capitalize;');
var ctrl = Runner.getControl(pageid, 'postcode');
ctrl.addStyle('text-transform: uppercase;');
var ctrl = Runner.getControl(pageid, 'NumData');
ctrl.addStyle('text-transform: uppercase;');
var ctrl = Runner.getControl(pageid, 'BldgData');
ctrl.addStyle('text-transform: capitalize;');
// this is the radio button
var ctrl_accom = Runner.getControl(pageid, 'accom_type');
var ctrl_NumLbl = Runner.getControl(pageid, 'NumLbl');
var ctrl_BldgLbl = Runner.getControl(pageid, 'BldgLbl');
// field street1 is on the hidden and populated from the contents of NumData and BldgData in the Before Record Added Event.
// street1 has to be on the page in order to be read and written by PHPRunner
pageObj.hideField('street1');
ctrl_accom.on('change', function(){
pageObj.showField('NumLbl'); pageObj.showField('NumData');
pageObj.showField('BldgLbl'); pageObj.showField('BldgData');
pageObj.showField('street2'); pageObj.showField('area');
pageObj.showField('town'); pageObj.showField('postcode');
switch(ctrl_accom.getValue()) {
case 'Flat':
ctrl_NumLbl.setValue('Flat No.'); ctrl_BldgLbl.setValue('Building');
break;
case 'NFA':
pageObj.hideField('NumLbl'); pageObj.hideField('NumData');
pageObj.hideField('BldgLbl'); pageObj.hideField('BldgData');
pageObj.hideField('street2'); pageObj.hideField('area'); pageObj.hideField('town');
pageObj.hideField('postcode');
break;
case 'Hostel':
ctrl_NumLbl.setValue('Room No.'); ctrl_BldgLbl.setValue('Hostel ');
break;
case 'House':
ctrl_NumLbl.setValue('House No.'); ctrl_BldgLbl.setValue('Street ');
break;
}JSONLOAD Event code for Edit Page is more complex
var ctrl_str2 = Runner.getControl(pageid, 'street2');
ctrl_str2.addStyle('text-transform: capitalize;');
var ctrl_area = Runner.getControl(pageid, 'area');
ctrl_area.addStyle('text-transform: capitalize;');
var ctrl_town = Runner.getControl(pageid, 'town');
ctrl_town.addStyle('text-transform: capitalize;');
var ctrl_pc = Runner.getControl(pageid, 'postcode');
ctrl_pc.addStyle('text-transform: uppercase;');
var ctrl_NumData = Runner.getControl(pageid, 'NumData');
ctrl_NumData.addStyle('text-transform: uppercase;');
var ctrl_BldgData = Runner.getControl(pageid, 'BldgData');
ctrl_BldgData.addStyle('text-transform: capitalize;');
var ctrl_accom = Runner.getControl(pageid, 'accom_type');
var ctrl_NumLbl = Runner.getControl(pageid, 'NumLbl');
var ctrl_BldgLbl = Runner.getControl(pageid, 'BldgLbl');
pageObj.hideField('street1');
$(document).ready(function(){
ctrl_NumData.setValue(proxy.num); ctrl_BldgData.setValue(proxy.building);
var ctrl_accom = Runner.getControl(pageid, 'accom_type');
switch(ctrl_accom.getValue()) {
case 'Flat':
ctrl_NumLbl.setValue('Flat No.'); ctrl_BldgLbl.setValue('Building');
break;
case 'NFA':
pageObj.hideField('NumLbl'); pageObj.hideField('NumData');
pageObj.hideField('BldgLbl'); pageObj.hideField('BldgData');
pageObj.hideField('street2'); pageObj.hideField('area'); pageObj.hideField('town');
pageObj.hideField('postcode');
break;
case 'Hostel':
ctrl_NumLbl.setValue('Room No.'); ctrl_BldgLbl.setValue('Hostel ');
break;
case 'House':
ctrl_NumLbl.setValue('House No.'); ctrl_BldgLbl.setValue('Street ');
break;
}
});
// Hide appropriate fields if accom type changes
ctrl_accom.on('change', function(){
pageObj.showField('NumLbl'); pageObj.showField('NumData');
pageObj.showField('BldgLbl'); pageObj.showField('BldgData');
pageObj.showField('street2'); pageObj.showField('area');
pageObj.showField('town'); pageObj.showField('postcode');
ctrl_NumData.on('focus', function(){
ctrl_NumData.setValue(''); ctrl_BldgData.setValue('');
ctrl_str2.setValue(''); ctrl_area.setValue('');
ctrl_town.setValue(''); ctrl_pc.setValue('');
});
switch(this.getValue()) {
case 'Flat':
ctrl_NumLbl.setValue('Flat No.'); ctrl_BldgLbl.setValue('Building');
break;
case 'NFA':
pageObj.hideField('NumLbl'); pageObj.hideField('NumData');
pageObj.hideField('BldgLbl'); pageObj.hideField('BldgData');
pageObj.hideField('street2'); pageObj.hideField('area'); pageObj.hideField('town');
pageObj.hideField('postcode');
break;
case 'Hostel':
ctrl_NumLbl.setValue('Room No.'); ctrl_BldgLbl.setValue('Hostel ') ;
break;
case 'House':
ctrl_NumLbl.setValue('House No.'); ctrl_BldgLbl.setValue('Street ');
break;
}
});