SharePoint Custom Form Hide or Show questions

Question

I have a SharePoint custom list application with forms modified in SharePoint designer. I am looking for a way to hide or display questions on the form based on other form questions.

Example: Lets say the form has questions with the following list fields that are Yes, No or N/A

F01 F02 F03 F04

If F01 = No then F02, F03 and F04 dont show

If F01 = Yes and F02 = No then F03 and F04 dont show

Here is script I tried

<script src="https://sharepointex3.dcs- 
.com/sites/GSSTA/TA/LOAD/jQuery/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// Show F02 , F03 , F04 when selecting "Yes"
  $("select[title='_x0046_01']").change(function() {
  if ($("select[title='_x0046_01']").val() == "Yes") {
           $('nobr:contains("_x0046_02")').closest('tr').show();
           $('nobr:contains("_x0046_03")').closest('tr').show();
           $('nobr:contains("_x0046_04")').closest('tr').show();
       }
  // hide F02 , F03 , F04 when selecting "No"
  else if($("select[title='_x0046_01']").val() == "No"){
         $('nobr:contains("_x0046_02")').closest('tr').hide();
         $('nobr:contains("_x0046_03")').closest('tr').hide();
         $('nobr:contains("_x0046_04")').closest('tr').hide();
      }
});
});
</script>

Here is the SharePoint code for the fields in question

<tr> <td valign="top" class="style15" style="width: 425px">question1td> <td valign="top" class="style15" style="width: 55px"><SharePoint:FormField runat="server" id="ff999{$Pos}" controlmode="Edit" fieldname="_x0046_01" itemid="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff999',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x0046_01')}" /></td> <td width="400px" valign="top" class="style15" style="width: 75px"><xsl:value-of select="@f01m" /></td><td width="400px" valign="top" class="style15" style="width: 275px"><SharePoint:FormField runat="server" id="ff9990{$Pos}" controlmode="Edit" fieldname="F01c" __designer:bind="{ddwrt:DataBind('u',concat('ff9990',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@F01c')}" /></td> </tr> <tr> <td valign="top" class="style15" style="width: 425px">question2td> <td valign="top" class="style15" style="width: 55px"><SharePoint:FormField runat="server" id="ff999a{$Pos}" controlmode="Edit" fieldname="_x0046_01" itemid="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff999a',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x0046_02')}" /></td> <td width="400px" valign="top" class="style15" style="width: 75px"><xsl:value-of select="@f01m" /></td><td width="400px" valign="top" class="style15" style="width: 275px"><SharePoint:FormField runat="server" id="ff9990a{$Pos}" controlmode="Edit" fieldname="F01c" __designer:bind="{ddwrt:DataBind('u',concat('ff9990a',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@F01c')}" /></td> </tr> <tr> <td valign="top" class="style15" style="width: 425px">question3td> <td valign="top" class="style15" style="width: 55px"><SharePoint:FormField runat="server" id="ff999b{$Pos}" controlmode="Edit" fieldname="_x0046_03" itemid="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff999b',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x0046_03')}" /></td> <td width="400px" valign="top" class="style15" style="width: 75px"><xsl:value-of select="@f01m" /></td><td width="400px" valign="top" class="style15" style="width: 275px"><SharePoint:FormField runat="server" id="ff9990b{$Pos}" controlmode="Edit" fieldname="F01c" __designer:bind="{ddwrt:DataBind('u',concat('ff9990b',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@F01c')}" /></td> </tr> <tr> <td valign="top" class="style15" style="width: 425px">question4</td> <td valign="top" class="style15" style="width: 55px"><SharePoint:FormField runat="server" id="ff999c{$Pos}" controlmode="Edit" fieldname="_x0046_03" itemid="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff999c',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x0046_03')}" /></td> <td width="400px" valign="top" class="style15" style="width: 75px"><xsl:value-of select="@f01m" /></td><td width="400px" valign="top" class="style15" style="width: 275px"><SharePoint:FormField runat="server" id="ff9990c{$Pos}" controlmode="Edit" fieldname="F01c" __designer:bind="{ddwrt:DataBind('u',concat('ff9990c',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@F01c')}" /></td> </tr>

Answer 1

Please check the below JQuery sample

<script src="http://code.jquery.com/jquery-1.7.2.min.js" 
type=text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

// Show F02 , F03 , F04 when selecting "Yes"
  $("select[title='F01']").change(function() {
  if ($("select[title='F01']").val() == "Yes") {
           $('nobr:contains("F02")').closest('tr').show();
           $('nobr:contains("F03")').closest('tr').show();
           $('nobr:contains("F04")').closest('tr').show();
       } 
  // hide F02 , F03 , F04 when selecting "No"
  else if($("select[title='F01']").val() == "No"){
         $('nobr:contains("F02")').closest('tr').hide();
         $('nobr:contains("F03")').closest('tr').hide();
         $('nobr:contains("F04")').closest('tr').hide();
      }
 });
});
 </script>

=========Update===

To add the java script\jquery into your form:

• Click the Settings Icon and click Edit Page

• Click add a web part

• Add a Content Editor web part
• in the Content Editor click on Edit Source ribbon button and add your script