SharePoint New/Edit Form

I am trying to force two fields to be hidden on a New/Edit Form for a List (Let's call it List2013)

Using javascript.... I want the fields RAMP_MonitoringDetails and RAMP_TestingDetails to only appear on the form if the a check box Item, Monitoring  and Testing respectively is selected in field called Mitigation. Please see embedded screenshot.

The fields should also disappear again if the check box is deselected.

If both boxes are checked both fields would be visible.

screenshot of the form with fields that are in question.
Please advise how the code should look for this and if the code needs to be included on the NewForm and EditForm aspx pages.

Thanks,
Adam
aehrenwoTechnology AnalystAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
please post the source code of the page or at least the form
0
Jamie McAllister MVPSharePoint ConsultantCommented:
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.
0
leakim971PluritechnicianCommented:
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    
     }
});


});
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Rainer JeschorCommented:
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
0
Rainer JeschorCommented:
@ 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).
0
leakim971PluritechnicianCommented:
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    
     }
});


});

Open in new window

0
BobHavertyComhCommented:
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
0
aehrenwoTechnology AnalystAuthor Commented:
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>

Open in new window

0
leakim971PluritechnicianCommented:
0
aehrenwoTechnology AnalystAuthor Commented:
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
0
leakim971PluritechnicianCommented:
Assuming you already have jQuery n place you don't need nothing else
Yes put it the aspx Forms
0
aehrenwoTechnology AnalystAuthor Commented:
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();

Open in new window


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

Wanted to note that
0
leakim971PluritechnicianCommented:
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']")
0
aehrenwoTechnology AnalystAuthor Commented:
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    
     }
});

});

Open in new window


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

KC
0
BobHavertyComhCommented:
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.
0
aehrenwoTechnology AnalystAuthor Commented:
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...
0
leakim971PluritechnicianCommented:
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
        }
    });

});

Open in new window

0
leakim971PluritechnicianCommented:
Take a look here : http://jsfiddle.net/UZBft/3/

$(document).ready(function(){
    
    $("textarea[title='RAMP_TestingDetails']").closest("tr").hide();
    $("textarea[title='RAMP_MonitoringDetails']").closest("tr").hide();

    $("span[title='Testing'] :checkbox").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
        }
    });

    $("span[title='Monitoring'] :checkbox").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
        }
    });

});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
aehrenwoTechnology AnalystAuthor Commented:
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")

Open in new window


KC
0
leakim971PluritechnicianCommented:
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/
0
BobHavertyComhCommented:
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.
0
BobHavertyComhCommented:
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.
0
aehrenwoTechnology AnalystAuthor Commented:
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    
     }
});

});

Open in new window

0
leakim971PluritechnicianCommented:
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);

Open in new window

0
leakim971PluritechnicianCommented:
$(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
        }
    });

});

Open in new window

0
aehrenwoTechnology AnalystAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft SharePoint

From novice to tech pro — start learning today.