Hide Fields in SharePoint List Form Pages

I’m trying to do exactly what you did in your first example. Hide or show columns based on a selected field. I created a test list in wss, added the CEWP and place the code into the Source. I tried pointing the source url to the google address as well as downloading the jquery script and pointing the the code to it. Neither work. I do not get errors, however, the check box does not hide the fields. Any help you can provide would be greatly appreciated!

I added the code you suggested to test the jquery file. It does not appear that the file is loading as I do not the “Hello Todd” alert. I added this code to the CEWP as well as the Master page and neither produced the alert. To clarify the steps that I am using I will provide them in order.

1) I created a custom list with a total of 7 fields. I have 3 fields; Title, FName & LName (all single line of text fields) , then a field called “ShowMore” (which is a yes/no field), then 3 additional fields; Column1, Column2 & Column3

2) I opened the custom list and clicked “New” to launch the new item page.

3) I appended &ToolPaneView=2 to the url

4) I added the CEWP above the “New form”

5) I pasted the following code into the CEWP using the Source editor button on the tool pane.

$(document).ready(function()
{
$(”input[title$=’ShowMore’]“).click(function()
{

$(”input[title$=’Column1′]“).parent(’span’).parent(’td’).parent(’tr’).toggle();
$(”input[title$=’Column2′]“).parent(’span’).parent(’td’).parent(’tr’).toggle();
$(”input[title$=’Column3′]“).parent(’span’).parent(’td’).parent(’tr’).toggle();

});

});

6) I performed the same steps on the “Edit” page

My understanding is that if I am pointing the jscript src to google’s site then I do not need the jquery file on my site and if I choose to point the src to somewhere on my site (doc lib) then I would need the jquery file in the location. Is that correct?

I would love to make this work. Please let me know if you have any more thoughts regarding the way that I am doing this. Thanks again for your help!!

Did you copy and paste the code directly to sharePoint site, then i think the problem is not with the code, maybe the problem is with double & single quotes. So, we have to replace the quotes manually. Enter the double quotes manually in the place of quote ( ” ) and also replace the single quote ( ’ ) with manually enter the single quote. This will solve your problem.

Last question…it is actually working but backwards. My checkbox says “showmore” and all fields are visible. When I click the show more box, everything hides. I need to reverse this so that when you click the box it shows and when un checked it hides.

correction..bottom line seems to be that the page does not load and run the script. The functions work as expected but only once the page is loaded and and you click on something. I am looking to have the page load with the specified fields hidden

I got this working. Thanks anyway, here is the code that I used which hides the fields on page load and then applies the toggle function on click

$(‘tr:has(input[title=Column1])’).not(‘tr:has(tr)’).hide();
$(‘tr:has(input[title=Column2])’).not(‘tr:has(tr)’).hide();
$(‘tr:has(input[title=Column3])’).not(‘tr:has(tr)’).hide();

$(“input[title$=’ShowMore’]”).click(function(){

$(‘tr:has(input[title=Column1])’).not(‘tr:has(tr)’).toggle();
$(‘tr:has(input[title=Column2])’).not(‘tr:has(tr)’).toggle();
$(‘tr:has(input[title=Column3])’).not(‘tr:has(tr)’).toggle();

Hi Todd,

Try the following:

$(document).ready(function()
{
$(“input[title$=’Column1′]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();
$(“input[title$=’Column2′]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();
$(“input[title$=’Column3′]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();

$(“input[title$=’ShowFields’]”).click(function()
{
$(“input[title$=’Column1′]”).parent(‘span’).parent(‘td’).parent(‘tr’).toggle();
$(“input[title$=’Column2′]”).parent(‘span’).parent(‘td’).parent(‘tr’).toggle();
$(“input[title$=’Column3′]”).parent(‘span’).parent(‘td’).parent(‘tr’).toggle();
});

});

Hi Guys,

trying to achieve oppsite way, when we click it shoud hide the Lookup with Multi select field and unlcik should show… what are the changes needs to be there… much appriciate your help…

I’ve had some success; however, I’m trying to find out how to use the checkboxes off of a mulivalued choice column.

Any pointers on the how toggle() field visiblity based on the checkbox of a choice column?

Thanks!

Hi there,

I’ve got a question. Everything works fine, with a script similar to above one. There just one thing what i don’t understand. When i click on the first textinput field (that i hide/unhide with a Yes/No checkbox) it has the same effect as when i click on the checkbox. This is not really handy, because most of the time, you click on a field before you give the input. I use this code:

Can anybody give me advise?

$(function() {

// This is a field which i hide
$(‘input[title=Naam volledig]’).parent().parent().parent().hide();
// These fields are standard hide. With the OR checkbox it unhides
$(‘input[title=Functie OR]’).parent().parent().parent().hide();
$(‘input[title=Commisie]’).parent().parent().parent().hide();
// This is a field which i hide
$(‘input[title=Foto]’).parent().parent().parent().hide();
});

$(document).ready(function()
{

$(“input[title$=’OR’]”).click(function()
{

$(“input[title$=’Functie OR’]”).parent(‘span’).parent(‘td’).parent(‘tr’).toggle();

$(“input[title$=’Commisie’]”).parent(‘span’).parent(‘td’).parent(‘tr’).toggle();

});

});