Friday, 12 August 2016

InfoPath and Javascript - accessing fields

I have found that if you reference the complete form name  #ctl00_ctl40_g_e8523f46_e657_46ec_aa9d_f8a08c446642_FormControl0_V1_I1_PB27 that form name changes when you republish the form.

The begin of the form name is dynamic and end is referring to the field in the form.

ctl00_ctl40_g_e8523f46_e657_46ec_aa9d_f8a08c446642_FormControl0_V1_I1_PB27

Should be written like this
//clear department and phone
$('[id$="FormControl0_V1_I1_T26"]').val("");
 $('[id$="FormControl0_V1_I1_T7"]').val("");

Not like this
//clear department and phone
 $('#ctl00_ctl40_g_84777929_920a_480e_81b1_1f2f20724097_FormControl0_V1_I1_T26').val("");
 $('#ctl00_ctl40_g_84777929_920a_480e_81b1_1f2f20724097_FormControl0_V1_I1_T7').val("");


To get the field information you can use debugger in IE (F12) or Chrome.






How to make Infopath and javascript work together - trick

Put the InfoPath form on web page and add a content edit web part with JavaScript file.

Here is an example


The issue for us was we couldn't enable the JavaScript within the infoPath form because we had to enable service on our production farm and we were concern about impacting other sites.  This was an easy workaround.

There are limitations to this solutions.
The form will time out after 30 minutes and you can't control the time out.  This particular form will not be open for an extended period of time so this works perfectly for us.