SharePoint New/Edit Form

please post the source code of the page or at least the form

You can use code like this;

http://the-north.com/sharepoint/post/Hide-Unwanted-Fields-On-Calendar-Form

However you're going to have to change it so it fires whenever the tickboxes change.

I suggest you also add the script direct to the form as the article details.

Or just replace checkboxID by the checkbox ID
and fieldID by the textarea ID

repeat the same code (NOT the document ready block of course!) for the second set

$(document).ready(function() {

$("#checkboxID").change(function() {
     if($(this).is(":checked")) {
          $("#fieldID").closest("tr").show(); // we show the full row    
     }
     else {
          $("#fieldID").closest("tr").hide(); // we hide the full row    
     }
});


});

Hi,
which SharePoint version AND edition (MOSS2007, SharePoint Foundation 2010 ...)?
Please attach the generated HTML source - otherwise it will be hard to create the correct jQuery selectors.
Thanks.
Rainer

@ leakim971: SharePoint generates random ids - the selector needs to filter by a text part at the end of the id but that depends on some internal field information which does not necessary be the same as what you can see on the screen (e.g. renaming / changing the field caption will not change the fields internal name in SharePoint).

What about using the ClientID like any other .NET webpage?

$(document).ready(function() {

$("#<%= Testing.ClientID %>").change(function() {
     if($(this).is(":checked")) {
          $("#<%= RAMP_TestingDetails.ClientID %>").closest("tr").show(); // we show the full row    
     }
     else {
          $("#<%= RAMP_TestingDetails.ClientID %>").closest("tr").hide(); // we hide the full row    
     }
});

$("#<%= Monitoring.ClientID %>").change(function() {
     if($(this).is(":checked")) {
          $("#<%= RAMP_MonitoringDetails.ClientID %>").closest("tr").show(); // we show the full row    
     }
     else {
          $("#<%= RAMP_MonitoringDetails.ClientID %>").closest("tr").hide(); // we hide the full row    
     }
});


});

Select allOpen in new window

Aehrenwo, it sounds like you don't want to get involved in writing much code. I believe this is possible to do in SharePoint Designer. Have a look at this and see if this works for you. It looks like you will have to create a custom edit form to do this, and perhaps set that form as the default. If you believe this solution can work and need help with creating a custom edit form in SharePoint Designer, let me know. HTH.

http://social.msdn.microsoft.com/Forums/sharepoint/en-US/4c366cd9-dd84-440c-bdbc-30ee2c81876e/conditionally-hide-a-field-in-a-custom-form-using-sharepoint-designer

Here is the section of SharePoint HTML source code where the CheckBox field is and the two fields below that should start as hidden and then appear if the respective check boxes (only Monitoring and Testing are in scope) are checked off. This is only code from the New Form but I assume same code would need to be included for the Edit Form as well.

Thanks ---

	<TR>
		<TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">
		<nobr>RAMP_MitigationCB</nobr>
	</H3></TD>
		<TD valign="top" class="ms-formbody" width="400px">
		<!-- FieldName="RAMP_MitigationCB"
			 FieldInternalName="RAMP_MitigationCB"
			 FieldType="SPFieldMultiChoice"
		  -->
			<span dir="none"><table cellpadding="0" cellspacing="1">
					<tr>
						<td><span class="ms-RadioText" title="Monitoring"><input id="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl00" type="checkbox" name="ctl00$m$g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad$ctl00$ctl04$ctl19$ctl00$ctl00$ctl04$ctl00$ctl00" /><label for="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl00">Monitoring</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="Testing"><input id="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl01" type="checkbox" name="ctl00$m$g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad$ctl00$ctl04$ctl19$ctl00$ctl00$ctl04$ctl00$ctl01" /><label for="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl01">Testing</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="Observation"><input id="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl02" type="checkbox" name="ctl00$m$g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad$ctl00$ctl04$ctl19$ctl00$ctl00$ctl04$ctl00$ctl02" /><label for="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl02">Observation</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="Training"><input id="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl03" type="checkbox" name="ctl00$m$g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad$ctl00$ctl04$ctl19$ctl00$ctl00$ctl04$ctl00$ctl03" /><label for="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl03">Training</label></span></td>
					</tr><tr>
						<td><span class="ms-RadioText" title="Policy"><input id="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl04" type="checkbox" name="ctl00$m$g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad$ctl00$ctl04$ctl19$ctl00$ctl00$ctl04$ctl00$ctl04" /><label for="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl04">Policy</label></span></td>
					</tr>
				</table></span>
			
			
		</TD>
	</TR>
	
		<TR>
		<TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">
		<nobr>RAMP_MonitoringDetails</nobr>
	</H3></TD>
		<TD valign="top" class="ms-formbody" width="400px">
		<!-- FieldName="RAMP_MonitoringDetails"
			 FieldInternalName="RAMP_MonitoringDetails"
			 FieldType="SPFieldNote"
		  -->
			<span dir="none">
		<textarea name="ctl00$m$g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad$ctl00$ctl04$ctl20$ctl00$ctl00$ctl04$ctl00$ctl00$TextField" rows="6" cols="20" id="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl20_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" title="RAMP_MonitoringDetails" class="ms-long" dir="none"></textarea><br>
	</span>
			
			
		</TD>
	</TR>
	
		<TR>
		<TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">
		<nobr>RAMP_TestingDetails</nobr>
	</H3></TD>
		<TD valign="top" class="ms-formbody" width="400px">
		<!-- FieldName="RAMP_TestingDetails"
			 FieldInternalName="RAMP_TestingDetails"
			 FieldType="SPFieldNote"
		  -->
			<span dir="none">
		<textarea name="ctl00$m$g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad$ctl00$ctl04$ctl21$ctl00$ctl00$ctl04$ctl00$ctl00$TextField" rows="6" cols="20" id="ctl00_m_g_6bf33566_1fd6_45c3_8c25_9296ba4be0ad_ctl00_ctl04_ctl21_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" title="RAMP_TestingDetails" class="ms-long" dir="none"></textarea><br>
	</span>
			
			
		</TD>
	</TR>

Select allOpen in new window

Did you tried the code from here :
https://www.experts-exchange.com/questions/28232812/SharePoint-New-Edit-Form.html?anchorAnswerId=39471046#a39471046

I did not get a chance to try that yet.. I was just following up with what others had been asking for.

Does your code need to be embedded directly on the New Form and Edit Form aspx pages? And, does any additional code reference need to be added to the check box field itself?

Thanks for your support

Adam

Assuming you already have jQuery n place you don't need nothing else
Yes put it the aspx Forms

Ok. I will try....

I had added the following code to another script file to make sure those fields are hidden initially when the page loads.. will this conflict with your code?

if (currentURL.indexOf("NewForm.aspx") != -1) {	
		
		//hiding the fields we don't want the user to see when creating a new item
		$("#WebPartWPQ2 :input[title='RAMP[b][/b]_MonitoringDetails']").parents("tr:first").hide();
		$("#WebPartWPQ2 :input[title='RAMP_TestingDetails']").parents("tr:first").hide();

Select allOpen in new window

One more note.. we are utilizing JQuery 1.7.1 - and it is SharePoint 2007.

Wanted to note that

No but what I'm seeing is you already found a way to found your object

So you may (if that don't work) replace
$("#<%= RAMP_TestingDetails.ClientID %>")
by :
$("#WebPartWPQ2 :input[title='RAMP_TestingDetails']")

and
$("#<%= RAMP_MonitoringDetails.ClientID %>")
by :
$("#WebPartWPQ2 :input[title='RAMP_MonitoringDetails']")

It looks once i included this code it is overriding the initial fields being hidden.

I am also putting this on on a JS file that is being referenced by both the New Form and Edit Form pages. Would that make a difference.

I also attempted to edit the change function target since I found the titles (not sure if this will work).

My desire here is that when the page loads the fields in question are hidden and only appear when the check boxes are selected. That does not appear to be happening once I load the new code.

$(document).ready(function(){

$("#WebPartWPQ2 :input[title='Testing']").change(function() {
     if($(this).is(":checked")) {
          $("#WebPartWPQ2 :input[title='RAMP_TestingDetails']").closest("tr").show(); // we show the full row    
     }
     else {
          $("#WebPartWPQ2 :input[title='RAMP_TestingDetails']").closest("tr").hide(); // we hide the full row    
     }
});

$("#WebPartWPQ2 :input[title='Monitoring']").change(function() {
     if($(this).is(":checked")) {
          $("#WebPartWPQ2 :input[title='RAMP_MonitoringDetails']").closest("tr").show(); // we show the full row    
     }
     else {
          $("#WebPartWPQ2 :input[title='RAMP_MonitoringDetails']").closest("tr").hide(); // we hide the full row    
     }
});

});

Select allOpen in new window

Thanks again for your continued support. I am sure I missing something simple here.

KC

Just curious. Does the first response on this link below somehow not work for you or is not appropriate for you for some reason?

http://social.msdn.microsoft.com/Forums/sharepoint/en-US/4c366cd9-dd84-440c-bdbc-30ee2c81876e/conditionally-hide-a-field-in-a-custom-form-using-sharepoint-designer

I wasn't sure if you saw my post or not. On the surface, to me, this looks like what you want, except you would be showing instead of hiding. I know you said javascript, but are you sure you even need to use javascript instead of the SharePoint Designer condition builder? Other people in that link above also suggested Javascript, but it looks like the first answer was the accepted one and the easiest one.

I don't appear to have the appropriate permission to add the WebPart to the  Forms Pages directly in SharePoint. The Edit option appears greyed-out.

I am able to hide the fields without any issue. The hard part for me is figuring out how to identify the ID of the input field in order to do a check if it is checked off or not to determine if the associated input field should be displayed again.

The ClientID feature does not appear to finding the appropriate input/field to do this check and I am trying to figure out how to get this value...

Your comment ID: 39484106 show you can  use the title.
But I'm not sure about << WebPartWPQ2 >> in your selector
Could check the page to confirm?

You may try to just use : $(":input[title='Testing']")
which mean there's no other control with the same title
Or perhaps :

To be sure the code run, try this :

$(document).ready(function(){

    var q = $(":checkbox[title='Testing']").length;
    alert("we found " + q + " control(s) for the following selector : $(\"textarea[title='Testing']\")");

    $(":checkbox[title='Testing']").change(function() {
        if($(this).is(":checked")) {
            $("textarea[title='RAMP_TestingDetails']").closest("tr").show(); // we show the full row
        }
        else {
            $("textarea[title='RAMP_TestingDetails']").closest("tr").hide(); // we hide the full row
        }
    });

    $(":checkbox[title='Monitoring']").change(function() {
        if($(this).is(":checked")) {
            $("textarea[title='RAMP_MonitoringDetails']").closest("tr").show(); // we show the full row
        }
        else {
            $("textarea[title='RAMP_MonitoringDetails']").closest("tr").hide(); // we hide the full row
        }
    });

});

Select allOpen in new window

Zero controls were found for the Title = 'Testing' using your extra code.

Next step...

The spans around the checkbox inputs actually have the needed titles (Monitoring/Testing)

I was going to try this type of approach to get the actual IDs of the check boxes.. would this work?

var MonitoringID
var TestingID

TestingID = $('span[title="Testing"]').closest("input").attr("id")
MonitoringID = $('span[title="Monitoring"]').closest("input").attr("id")

Select allOpen in new window

KC

check my previous post, you miss it

or from your code it should be children or find instead closest

TestingID = $('span[title="Testing"]').children("input").attr("id")
MonitoringID = $('span[title="Monitoring"]').children("input").attr("id")

http://api.jquery.com/children/
http://api.jquery.com/find/
http://api.jquery.com/closest/

OK Adam, i guess I understand, but you would actually make a new form in SharePoint Designer and then set it as the default form. But if you want to do javascript, then fine.

It seems like you are saying that your only problem is finding the ID of each of these checkboxes, or any of your fields for that matter. All you have to do is to look at the code view in Designer instead of design view, or use split view, click on the control you are interested in in design view, look at the code in the code view pane and the code for that control should be highlighted and in it's tag it should have an attribute called ID. That's your ID. Then in regular javascript you can call

var whatever = document.getElementByid(Id from tag attribute goes here) and that variable will now reference that particular checkbox.

Then it's whatever.style.display="block" or "inline" to show it, depending upon how you want to show it, or whatever.style.display ="none"; to hide it.  Or in your case, it would be if whatever.checked = true, then.......

http://blog.movalog.com/a/javascript-toggle-visibility/.

Are these checkboxes part of a multivalue field group or are they all separate checkboxes? If they are separate, then i don't see what the big deal is. Am i missing something? It sounds like I am.

Also, if you are trying to hide or show entire rows, then just add an id attribute to the rows in question and now you can access those exact rows via getTelenemtById.. Is the problem that these checkboxes and rows are within a web part for that list? Does the web part not allow you to click on individual controls and just highlights the whole web part? If so, then just create a new form in Designer for that list and the you should be able to edit individual controls and you can do what I earlier suggested or at least you can click on the checkbox and see it's properties in the properties pane, and there you should find the ID. Then you set the new form as the default form.

Thank you!!! with some minor adjustment got this to work. Below is the final code that is working.

One question.. On the Edit Form page if I wanted it to keep the fields visible initially if they were already checked is there an easy fix to the code or should I do something specific to the EditForm Page?

$(document).ready(function() {

var MonitoringID
var TestingID


$("textarea[title='RAMP_TestingDetails']").closest("tr").hide();


$("textarea[title='RAMP_MonitoringDetails']").closest("tr").hide();

TestingID = $('span[title="Testing"]').children("input").attr("id")
MonitoringID = $('span[title="Monitoring"]').children("input").attr("id")

alert("we found" + TestingID);

$("input:[id="+ TestingID +"]").change(function() {
     if($(this).is(":checked")) {
           $("textarea[title='RAMP_TestingDetails']").closest("tr").show(); // we show the full row    
     }
     else {
           $("textarea[title='RAMP_TestingDetails']").closest("tr").hide(); // we hide the full row    
     }
});

$("input:[id=" + MonitoringID +"]").change(function() {
     if($(this).is(":checked")) {
          $("textarea[title='RAMP_MonitoringDetails']").closest("tr").show(); // we show the full row    
     }
     else {
          $("textarea[title='RAMP_MonitoringDetails']").closest("tr").hide(); // we hide the full row    
     }
});

});

Select allOpen in new window

var display = $("input:[id="+ TestingID +"]").is(":checked")?"block":"none";
$("textarea[title='RAMP_TestingDetails']").closest("tr").css("display",display);
display = $("input:[id=" + MonitoringID +"]").is(":checked")?"block":"none";
$("textarea[title='RAMP_MonitoringDetails']").closest("tr").css("display",display);

Select allOpen in new window

$(document).ready(function() {

    var TestingID = $('span[title="Testing"]').children("input").attr("id")
    var MonitoringID = $('span[title="Monitoring"]').children("input").attr("id")

    var display = $("#"+TestingID).is(":checked")?"block":"none";
    $("textarea[title='RAMP_TestingDetails']").closest("tr").css("display",display);
    display = $("#"+MonitoringID).is(":checked")?"block":"none";
    $("textarea[title='RAMP_MonitoringDetails']").closest("tr").css("display",display)    
    
    $("#"+TestingID).change(function() {
        if($(this).is(":checked")) {
            $("textarea[title='RAMP_TestingDetails']").closest("tr").show(); // we show the full row
        }
        else {
            $("textarea[title='RAMP_TestingDetails']").closest("tr").hide(); // we hide the full row
        }
    });

    $("#"+MonitoringID).change(function() {
        if($(this).is(":checked")) {
            $("textarea[title='RAMP_MonitoringDetails']").closest("tr").show(); // we show the full row
        }
        else {
            $("textarea[title='RAMP_MonitoringDetails']").closest("tr").hide(); // we hide the full row
        }
    });

});

Select allOpen in new window

Great... really appreciate the help today, this saved me a lot of time and definitely taught me some new tools to use in the future.