Conditionally hiding/showing fields on a custom newform using jquery

Question

This is something I have been struggling with for some time now. I have looked all over the internet at different forums and blogs trying to find a solution and I have finally gotten ALMOST there. I am hoping someone here can help me cross the finish line.

Here is the situation. I am developing multiple list based issue tracking solutions using the Standard edition of SharePoint 2010 for my company. I dont have access to infopath but I do have full admin control of the farm so I can install/Deploy FREE 3rd party solutions designed to make it easier to customize forms or workflows.

In short I needed a way to hide/show certain fields based on the selections of preceding fields and then make the fields required. Sounds easy but it has proven quite the challenge.

I have tried a solution that uses the sputility javascript library (found here) and it works great assuming I want to use the out of the box forms but unfortunately the business requirement involves some branding that demands the creation of custom forms and that is where sputility falls flat.

I have also tried the infowise "Smart List Pro Lite" solution (found here) but it appears to have the same limitation.

Finally I dug up a possibly solution (here) that seems to be specific to my need and using this I have managed to actually get lower fields (fied2 and field3) to hide based on a value in a field (field1) above. The only problem is I cant seem to get them to come BACK if the value in field1 is changed.

This is probably something simple but frankly I am out of my depth as I am just now starting to understand javascript. Also I apologize if technically this is a javascipt question and not a sharepoint question but I would like to post my code and see if someone can tell me what I am doing wrong:

*obviously I have modified the 3rd field type (to be a choice with an id field I could reference) but it wasn't working with the field type designated in the article either.

<script type="text/javascript" src="https://xxx.xxxxxx.xxx/Shared%20Documents/jquery-1.9.1.js"></script> <script type="text/javascript">

$(document).ready(function(){


  var selected = $("select[title = 'Field1']").val();

  if(selected == "Yes") {

    $("select[title = 'Field2']").closest("tr").show();
    $("select[title = 'Field3']").closest("tr").show();

  }

  else {

    $("select[title = 'Field2']").closest("tr").hide();
    $("select[title = 'Field3']").closest("tr").hide();

    $("select[title = 'Field2']").get(0).selectedIndex = 0;
    $("select[title = 'Field3']").val("");

  };


  $("select[title = 'Field1']").on("change", function(){


    var selected = $("selected[title = 'Field1']").val();

    if (selected == "Yes"){

      $("select[title = 'Field2']").closest("tr").show();
      $("select[title = 'Field3']").closest("tr").show();

    }

    else{

      $("select[title = 'Field2']").closest("tr").hide();
      $("select[title = 'Field3']").closest("tr").hide();

      $("select[title = 'Field2']").get(0).selectedIndex = 0;
      $("select[title = 'Field3']").val("");

    }

  });

});

</script>

As always, thank you for any help.

Answer 1

Here, in the code I can find only one mistake is there and that's the why it is not working when dropdown values gets changed,

and it is

  var selected = $("selected[title = 'Field1']").val();

should be,

 var selected = $("select[title = 'Field1']").val();

Answer 2

Since the code for the initial set of show & hide seem so similar, it sounds like your second set of code isn't getting called. An alert statement inside of your code alert( ex: ("Hello World"); ) would help. You can also try changing the method you use to watch for the change to

$("select[title = 'Field1']").change(function () {

and see if you get the desired result. Also, your dev console (F12 for IE) can tell you if you're hitting JS errors during execution.

Answer 3

I've learned a couple things that might help you. For one, you could use Firefox and Firebug to try to verify that the elements you want to select are being selected in the jQuery code. When I'm having trouble getting something to work using jQuery, I sometimes go back to writing it in javascript. I learned that selecting elements by the "ID" that you write in html doesn't work in Sharepoint, because Sharepoint creates an extremely long ID when it renders the page. You can select elements by their id if you do it this way ("ColleagueYes" is the ID in my html code): document.getElementById('<%=(this.FindControl("ColleagueYes")).ClientID %>'). You can also select elements using a class name because it won't change the class name. It will get all the elements with that class name but then you need to specify which element in the array you want to use. I will include a similar but different example where I show/hide something based on clicking a radio button. If they click "yes" it shows, if they click "no" it hides. Note the onClick function call. You may want to use onSelect or something else. I hope this may help you. It was written in .Net Framework 3.5 for Sharepoint 2010.

HTML code:

<p>Will the Employee require Counselor access to Student Planning?
<asp:RadioButton ID="CounselorYes" runat="server" Text="Yes" Checked="false" GroupName="CounselorAccess" onClick="showComments()" />
<asp:RadioButton ID="CounselorNo" runat="server" Text="No" GroupName="CounselorAccess" Checked="true" onClick="hideComments()" />
</p>
<p id="commentBox" class="commentBox" runat="server" style="display: none;">
<asp:Label ID="lblComments" runat="server" Text="Additional Comments" AssociatedControlID="Comments"></asp:Label>
<br />
<asp:TextBox ID="Comments" runat="server" TextMode="MultiLine" Width="80%" MaxLength="255" Height="80px"></asp:TextBox>
</p>

javascript code:

<script type="text/javascript">
        function showComments() {

            var x = document.getElementsByClassName("commentBox");
            var i;
            for (i = 0; i < x.length; i++) {
                x[i].style.display = 'block';
            }
        }

        function hideComments() {
            var x = document.getElementById('<%= (this.FindControl("ColleagueYes")).ClientID %>');
            if (x != null && !x.is(":checked") {
                var y = document.getElementsByClassName("commentBox");
                var i;
                for (i = 0; i < y.length; i++) {
                    y[i].style.display = 'none';
                }
            }
        }

</script>

Answer 4

Try to use the following code to show and hide a specific based on choice 'City' value

$(document).ready(function(){
//Show/hide columns based on Choice Field Selection
$("select[title='City']").change(function() {
if ($("select[title='City']").val() != "other")
{
$('nobr:contains("OtherCity")').closest('tr').hide();
}
else
{
$('nobr:contains("OtherCity")').closest('tr').show();
}
});
});

For more details, you can check the full ref Show / Hide fields based on choice field selection using Jquery in SharePoint