Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

We have a custom list with choice radio button field with values (Yes,No) and a Checkbox field. We want to hide the Checkbox when user click no, how we can achieve this in SPD?

what is the best way to do this?

<tr>
  <td width="190px" valign="top" class="ms-formlabel">
    <H3 class="ms-standardheader">
       <nobr>Test1  Assigned?<span class="ms-formvalidation"> *</span></nobr>
    </H3>
  </td>
  <td width="400px" valign="top" class="ms-formbody">
    <SharePoint:FormField  runat="server" id="ff29{$Pos}"
                           ControlMode="Edit" FieldName="Test1_x0020_PM_x0020_Assig"
                           __designer:bind="{ddwrt:DataBind('u',concat('ff29',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Test1_x0020_PM_x0020_Assig')}"
                           />
    <SharePoint:FieldDescription runat="server" id="ff29description{$Pos}"
                                 FieldName="Engineering_x0020_PM_x0020_Assig"
                                 ControlMode="Edit" />
    <H3 class="ms-standardheader"><nobr>Test2 PM Name</nobr></H3>
    <SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="Edit"
                          FieldName="Test2_x0020_PM_x0020_Name"
                          __designer:bind="{ddwrt:DataBind('u',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Test2_x0020_PM_x0020_Name')}"
                          />
    <SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="Engineering_x0020_PM_x0020_Name" ControlMode="Edit" /></div></td>
</tr>
share|improve this question
add comment

2 Answers

I like to use jQuery for this sort of operation. you can also use XSLT Conditional Formatting in the form, but I feel it is far harder to read and debug than jQuery.

  1. Add jQuery to your page.

  2. View the page's source in IE and get the id of the control you wish to monitor for changes in value..

  3. Add an id='some_text' attribute to the table row you wish to show/hide using SP Designer.

  4. Learn to use jQuery to attach a change event to the control whose value determines what is being shown/hidden.

    $(document).ready(

    function(){
         //Select the very long GUID of the control and attach the change event handler
        $('#ctl00_m_g_96b4d1be_781c_44eb_941f_c01b7ae00ede_ff371_ctl00_Lookup').change(
            function(){
               //Run a function to evaluate what to do when the value is changed.
               doWork();
             })
      }
    );
    
  5. Within the function you are using to do all the work, set the visibility of the table row.

    $('#existing-tr').css('visibility','hidden');

And that should do it. The XSLT written by designer is exceptionally hard to read and, IMO, next to impossible to change after you have it set. So jQuery is really the option to work with for these sorts of tasks.

share|improve this answer
    
I am new to jquery, can you please provide me the whole code if possible. –  user9052 Jun 22 '12 at 23:50
    
Without access to you environment that will be a little hard. I've provided you with the links required to figure it out. But as I am not on your payroll, you can put some more effort in. –  Robert Kaucher Jun 25 '12 at 12:22
add comment

i did this recently.the trick here is to attach an onchange event to your yes/no field on page load, use this code :

<script type="text/ecmascript">
   if (window.attachEvent){
       window.attachEvent('onload', OnLoad);
   }else if (window.addEventListner){
       window.addEventListner('load', OnLoad, false);  
   }else{
       window.onload = OnLoad;
   }

   function OnLoad(){
      //Attach the onchange event to your yes/no field  
      document.querySelector("span[title=yesnofieldname]").onchange=function(){
          // this code is executed everytime the yes/no value changes
          // do wathever you want here to manage
          var el = document.querySelector("span[title=yesnofieldname]");
          if (el.value == 'No'){
             document.querySelector("span[title=otherfieldname]").style.display = 'none';
          }
      }
   }
</script>

i hope this is what your are looking for.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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