3

I am trying to show/hide other fields depending on the choice selected from a specific choice field in my SharePoint form (NOT InfoPath). I can get it to work using "onfocusout" but that does not work in Firefox, and it doesn't call the function until after I select the item and then click off of the box. This could confuse users, so I need it to call the function immediately upon selection of a choice.

I am using SharePoint 2010 (and Designer 2010) and I need it to work on Firefox and IE8. Yeah, I know IE8 is REALLY old, but I don't have a choice. Any help would be appreciated!

Here's what I am using (it is contained inside of a table td):

  <div onfocusout="showFields()">
      <SharePoint:FormField runat="server" id="ff15{$Pos}" ControlMode="New" FieldName="Account_x0020_Type" __designer:bind="{ddwrt:DataBind('i',concat('ff15',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Account_x0020_Type')}"/>
      <SharePoint:FieldDescription runat="server" id="ff15description{$Pos}" FieldName="Account_x0020_Type" ControlMode="New"/>
  </div>

Then the function is as follows:

function showFields() {
var accountType = $('#ctl00_m_g_de548742_27f6_4e71_b3ec_2d9a1ecca117_ff151_ctl00_DropDownChoice').val();

 if(accountType == 'Military') {
    $('.milShow').show();
    $('.ctrShow').hide();
    $('.civShow').hide();
 }
 if(accountType == 'Government Civilian') {
    $('.civShow').show();
    $('.ctrShow').hide();
    $('.milShow').hide();
 }
 if(accountType == 'Contractor') {
    $('.ctrShow').show();
    $('.milShow').hide();
    $('.civShow').hide();
 }
}
  • Didn't it occur to you that what you're trying to achieve is changing content type without a postback? – Alexey Krasheninnikov Dec 9 '14 at 7:43
3

Try this

$(document).ready(function(){
    $('#ctl00_m_g_de548742_27f6_4e71_b3ec_2d9a1ecca117_ff151_ctl00_DropDownChoice').on('change', function(){
        var accountType = this.value;
        if(accountType == 'Military') {
            $('.milShow').show();
            $('.ctrShow').hide();
            $('.civShow').hide();
        }
        if(accountType == 'Government Civilian') {
            $('.civShow').show();
            $('.ctrShow').hide();
            $('.milShow').hide();
        }
        if(accountType == 'Contractor') {
            $('.ctrShow').show();
            $('.milShow').hide();
            $('.civShow').hide();
        }
    });
});
  • You have just saved me from so much frustration. Thank you! It worked perfectly. – Caola Dec 8 '14 at 20:22
  • Consider using switch instead of if if if – Alexey Krasheninnikov Dec 9 '14 at 7:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.