Triggering javascript on a SharePoint Form Dropdown Field on Page Load without clicking

Question

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

Brandon C. · Accepted Answer · 2014-06-30 13:43:39Z

1

At the end of the script, before closing it, write this line:

window.onload = init_fieldsWA();

It'll run the script once everything on the page has been loaded.

Or wrap the entire thing in a function, and then execute that function with the window.onload call.

EDIT: Actually, looking at your code, just have window.onload = whatever you want to do when the page loads (which I believe is where you set the variable c).

edited Jun 30 '14 at 13:43

answered Jun 30 '14 at 13:35

Brandon C.

7237 silver badges9 bronze badges

Add a comment |

Aveenav · Accepted Answer · 2014-06-30 14:38:06Z

1

You'll need to retrieve Url parameter, then pass it on to your dynamicDisplay() function.

function getUrlVar(key) {
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search);
    return result && unescape(result[1]) || "";
}

Since you're already using jQuery, use

$(document).ready(function () {
   var workArea = getUrlVar('WorkArea');
   if (workArea != '') {
      $("select[title^='WorkArea']").eq(0).val(workArea); //this will trigger on change
      //or you can call your function directly 
      dynamicDisplayWA(workarea);
   }
});

answered Jun 30 '14 at 14:38

Aveenav

4,1591 gold badge11 silver badges13 bronze badges

Well I couldnt get this to work but I used your idea and now have managed to capture the URL parameter in a variable. The second part of your code isnt working. Well, it does partially. The captured URL string from the variable can be used to populate the dropdown but the problem is the fact I cant make the 'WorkArea' dropdown have focus, or get javascript to 'click' the dropdown after the page load so that the rest of my code executes to show the hidden field(s).
– Rick Lister
Jul 1 '14 at 15:39
You'd need to change the 'WorkArea' to match your dropdown's title. Once the value gets selected, it should trigger onchange automatically. That way you don't need to trigger on click. Use firebug to see what's the title for your dropdown box. In the console run the command to test it. For ex. $("select[title^='WorkArea']").eq(0).val('ServiceCEA'); $("select[title^='WorkArea']").eq(0).val(workArea);
– Aveenav
Jul 1 '14 at 19:26
The dropdown box IS 'WorkArea'. That bit works. The dropdown is populated with the string taken from the URL and is populated BUT it doesnt trigger an 'onchange' of the dropdown. The only way I can do that is to phsically click in the dropdown and change the value. As soon as I do that, the hidden fields appear...
– Rick Lister
Jul 2 '14 at 9:33
Try: $("select[title^='WorkArea']").eq(0).val(workArea).change(); // workArea value passed from URL
– Aveenav
Jul 2 '14 at 14:01

Add a comment |

Rick Lister · Accepted Answer · 2014-07-03 09:59:18Z

Great thanks to Aveenav for partially helping me along. The answer was relatively simple. I used Aveenav's idea of pulling the value from the URL and storing it in a variable but I then used this variable to show the hidden field instead of trying to parse the value into the dropdown and getting the dropdown value to do the work.

So I tweaked my code like this:

<!-- SECTION 2.0: SHOW WORK AREA DETAILS-->

//Get string from URL
function getQueryVariable(variable)
{
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }
   return(false);
}

//Store URL String
getQueryVariable("WorkArea");

var WAvalue = getQueryVariable("WorkArea");

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 - USE THE URL STRING VARIABLE AND PARSE THAT INTO THE 'dynamicDisplay function'
var c = WAvalue;
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;
};

Now everything works as it should. Many thanks to all who helped.

Stack Exchange Network

current community

your communities

more stack exchange communities

Triggering javascript on a SharePoint Form Dropdown Field on Page Load without clicking

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged sharepoint-enterprise sharepoint-foundation javascript jquery dropdown or ask your own question.

Hot Network Questions

Triggering javascript on a SharePoint Form Dropdown Field on Page Load without clicking

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged sharepoint-enterprise sharepoint-foundation javascript jquery dropdown or ask your own question.

Related

Hot Network Questions