I have a NewForm.aspx page which is populated automatically via a query string in the URL, e.g. newform.aspx?Title=New Item&WorkArea=DHIS&Location=London
I have some javascript code which shows/hides Form Fields based on the value of a dropdown Form Field called 'WorkArea'. So, if 'WorkArea = DHIS' then another Form Field on the page is visible called 'ServiceDHIS'. If 'WorkArea = DCHS' then a Form Field on the page called 'ServiceDCHS' is visible and so on.
The code is below:
WAfields = init_fieldsWA();
// Arrays of fields to show or hide
var arrWA1 = ['ServiceOther'];
var arrWA2 = ['ServiceCEA'];
var arrWA3 = ['ServiceDHIS'];
var arrWA4 = ['ServiceDCHSBankStaff'];
var arrWA5 = ['ServiceHPES'];
var arrWA6 = ['ServiceHWI'];
var arrWA7 = ['ServiceHROD'];
var arrWA8 = ['ServiceFIP'];
var arrWA9 = ['ServiceICBS'];
var arrWA10 = ['ServicePOE'];
var arrWA11 = ['ServicePCO'];
var arrWA12 = ['ServiceQIG'];
var arrWA13 = ['ServiceStrategy'];
// Hide all onload
var arrToHideWA = [];
arrToHideWA = arrToHideWA.concat(arrWA1,arrWA2,arrWA3,arrWA4,arrWA5,arrWA6,arrWA7,arrWA8,arrWA9,arrWA10,arrWA11,arrWA12,arrWA13);
toggleArrWA(arrToHideWA,true);
// Onchange
$(WAfields['WorkArea']).find('select').change(function(){
var c = $(this).find('option:selected').text();
dynamicDisplayWA(c);
});
// Onload
var c = $(WAfields['WorkArea']).find('option:selected').text();
dynamicDisplayWA(c);
function dynamicDisplayWA(workarea){
// Hide all initially
toggleArrWA(arrToHideWA,true);
if(workarea=='Other'){
toggleArrWA(arrWA1,false);
}
else if(workarea=='Chief Executive/Administration'){
toggleArrWA(arrWA2,false);
}
else if(workarea=='DHIS'){
toggleArrWA(arrWA3,false);
}
else if(workarea=='DCHS Bank Staff'){
toggleArrWA(arrWA4,false);
}
else if(workarea=='Health Wellbeing & Inclusion'){
toggleArrWA(arrWA5,false);
}
else if(workarea=='Human Resources/Organisational Development'){
toggleArrWA(arrWA6,false);
}
else if(workarea=='Finance, Information & Performance'){
toggleArrWA(arrWA7,false);
}
else if(workarea=='Integrated Community Based Services'){
toggleArrWA(arrWA8,false);
}
else if(workarea=='People & Organisational Effectiveness'){
toggleArrWA(arrWA9,false);
}
else if(workarea=='Planned Care & Outpatients'){
toggleArrWA(arrWA10,false);
}
else if(workarea=='Quality & Integrated Governance'){
toggleArrWA(arrWA11,false);
}
else if(workarea=='Strategy'){
toggleArrWA(arrWA12,false);
}
}
function toggleArrWA(arrWA,hide){
if(hide){
for(i=0;i<arrWA.length;i++){
$(WAfields[arrWA[i]]).hide();
}
}else if(!hide){
for(i=0;i<arrWA.length;i++){
$(WAfields[arrWA[i]]).show();
}
}
}
function init_fieldsWA(){
var res = {};
$("td.ms-formbody").each(function(){
if($(this).html().indexOf('FieldInternalName="')<0) return;
var start = $(this).html().indexOf('FieldInternalName="')+19;
var stopp = $(this).html().indexOf('FieldType="')-7;
var nm = $(this).html().substring(start,stopp);
res[nm] = this.parentNode;
});
return res;
};
This code executes only when the 'WorkArea' dropdown is clicked. Then the hidden Form Field becomes visible on the form. Im trying to get the javascript to execute onpageload without having to need to click the 'WorkArea' dropdown Form Field before hand.
Having doing a bit of debugging it seems the code works fine, but the parsed value is not read by the javascript when it runs. In essence although populated, the javascript sees that the 'WorkArea' Form Field Dropdown has no value until clicked.
Can anyone advise how I can make the 'WorkArea' Form Field active on page load, as if it had been clicked so that the javascript picks up the value parsed into the 'WorkArea' field and then executes the rest of the script successfully.
Cheers
Rick