SP2013 - How to hide fields in custom new/edit form using a checkbox as a trigger?

Question

I am able to hide fields in the default new/edit forms using JS, but am having trouble sorting out how to do it when using customized new/edit forms with the hide/unhide function triggered by a checkbox in SP2013...

I cannot find a solid example of code to point me in the right direction; would anyone be able to assist?

Again, this is for >SP2010 using a checkbox as a trigger. I do have access to SPD, of course no InfoPath.

Thanks for your help.

Answer 1

New item entry form: how to hide 2 fields with a code in SP designer NewForm.aspx

Mentions SP2013 CSR code, but the Javascript (no need for jQuery) applies to SP2010 as well

Disclaimer: if you are just starting with JavaScript the code might seem complex, if you read the comments it should be clear

Answer 2

Here's an example in JQuery - we are on 2013 now, but I think this will work in 2010. You could also attach it to .change instead of .click. I tend to find the display text and then walk up to the row. Use the F12 developer tools and investigate the structure of the page with the DOM explorer - that will help you construct your jquery access.

   // on edit form, do your hide  based on current status to start things off.
// Use the names that show on the form.
// assume all are showing, and checking means to hide


if($('input[title="CHECKBOXDISPLAYNAME"]').is(':checked') ) {
           // hide rows
     $('nobr:contains("FIELD1DISPLAYNAME")').parents('tr:first').hide();

      $('nobr:contains("FIELD2DISPLAYNAME")').parents('tr:first').hide();
}  else {
      // do something if the checkbox is unchecked.
  }



// and then keep it in sync when the checkbox changes.        
        $('nobr:contains("CHECKBOXDISPLAYNAME")').parents('tr:first').find('input').click (function () {
            if ($(this).is(':checked')) {  
           // hide rows
           $('nobr:contains("FIELD1DISPLAYNAME")').parents('tr:first').hide();
           $('nobr:contains("FIELD2DISPLAYNAME")').parents('tr:first').hide();
            } else {
           // show rows
           $('nobr:contains("FIELD1DISPLAYNAME")').parents('tr:first').show();
           $('nobr:contains("FIELD2DISPLAYNAME")').parents('tr:first').show();
            }
         });

---

$(document).ready(function() { if($('input[title="Checkbox"]').is(':checked') ) { // hide rows $('nobr:contains("HideText")').parents('tr:first').hide(); } $('nobr:contains("Checkbox")').parents('tr:first').find('input').click (function () { if ($(this).is(':checked')) { // hide rows $('nobr:contains("HideText")').parents('tr:first').hide(); } else { // show rows $('nobr:contains("HideText")').parents('tr:first').show(); } }); });