This project has moved. For the latest updates, please go here.

Show field if checked

Oct 17, 2012 at 12:04 AM
Edited Oct 17, 2012 at 12:12 AM

This development is a lifesaver...

I have a multi select field on my edit form and if the value is checked show another field but I'm not having much luck finding getting the value... Using Moss and standard doc library...

Example:

Field Classes

checkboxes (English, Math, Science)

If English is check show field English Comments....

 

 (Note..I thought this post didnt go through so I rewrote it...sorry)

Coordinator
Oct 18, 2012 at 10:53 PM

Hey srice, I'm glad you find the library useful. :)

First, you'll want to get the field.

 

var fieldClasses = SPUtility.GetSPField('Classes');

 

Then, there is a special Checkboxes property that is set since it is a multi-select field. It is an object with each of the object values as a key and the checkbox as the value. You can then observe a click event on this checkbox to show or hide another field:

 

fieldClasses.Checkboxes.get("English").observe('click', function(evt) {
    var englishComments = SPUtility.GetSPField('English Comments');
    // this is the input element the user clicked on
    if (this.checked) {
        englishComments.Show();
    } else {
        englishComments.Hide();
    }
});

 

I'm sure you could refactor this code if you have a whole bunch of checkboxes.

P.S. You can also use prototype's each method to iterate over the checkboxes. Try the code here while on your page in Firefox or Chrome's JavaScript console:

 

SPUtility.GetSPField('Multiselect Column').Checkboxes.each(function(elem){
    console.log(elem);
});

 

Prints something like this:

["Alpha", 
<input id="ctl00_m_g_c56df95b_f9b2_436d_a9dd_7d9c534337d4_ctl00_ctl04_ctl06_ctl00_ctl00_ctl04_ctl00_ctl00" type="checkbox" name="ctl00$m$g_c56df95b_f9b2_436d_a9dd_7d9c534337d4$ctl00$ctl04$ctl06$ctl00$ctl00$ctl04$ctl00$ctl00" checked="checked">
]
["Bravo", 
<input id="ctl00_m_g_c56df95b_f9b2_436d_a9dd_7d9c534337d4_ctl00_ctl04_ctl06_ctl00_ctl00_ctl04_ctl00_ctl01" type="checkbox" name="ctl00$m$g_c56df95b_f9b2_436d_a9dd_7d9c534337d4$ctl00$ctl04$ctl06$ctl00$ctl00$ctl04$ctl00$ctl01">
]
["Charlie", 
<input id="ctl00_m_g_c56df95b_f9b2_436d_a9dd_7d9c534337d4_ctl00_ctl04_ctl06_ctl00_ctl00_ctl04_ctl00_ctl02" type="checkbox" name="ctl00$m$g_c56df95b_f9b2_436d_a9dd_7d9c534337d4$ctl00$ctl04$ctl06$ctl00$ctl00$ctl04$ctl00$ctl02" checked="checked">
]
["Delta", 
<input id="ctl00_m_g_c56df95b_f9b2_436d_a9dd_7d9c534337d4_ctl00_ctl04_ctl06_ctl00_ctl00_ctl04_ctl00_ctl03" type="checkbox" name="ctl00$m$g_c56df95b_f9b2_436d_a9dd_7d9c534337d4$ctl00$ctl04$ctl06$ctl00$ctl00$ctl04$ctl00$ctl03">
]
["Echo", 
<input id="ctl00_m_g_c56df95b_f9b2_436d_a9dd_7d9c534337d4_ctl00_ctl04_ctl06_ctl00_ctl00_ctl04_ctl00_ctl04" type="checkbox" name="ctl00$m$g_c56df95b_f9b2_436d_a9dd_7d9c534337d4$ctl00$ctl04$ctl06$ctl00$ctl00$ctl04$ctl00$ctl04" checked="checked">
]

Nov 5, 2012 at 12:37 AM
Edited Nov 5, 2012 at 12:46 AM
Thanks for responding. I entered the code as suggested and it changes my name field from readonly and doesn't hide or unhide the other fields. I'm sure it something with my syntax...
here is my code
 
<script type="text/javascript" src="/school/prototype.js"></script>
<script type="text/javascript" src="/school/SPUtility.js"></script>
<script type="text/javascript">

 
// run after the page has loaded
Event.observe(window,'load',function(){
try {
//make the name a readonly field
SPUtility.GetSPField('Name').MakeReadOnly();
var fieldClasses = SPUtility.GetSPField('Classes');
fieldClasses.Checkboxes.get("English").observe('click', function(evt) { var englishComments = SPUtility.GetSPField('English Comments'); // this is the input element the user clicked on if (this.checked) { englishComments.Show(); } else { englishComments.Hide(); } });

fieldClasses.Checkboxes.get("Math").observe('click', function(evt) { var mathComments = SPUtility.GetSPField('Math Comments'); // this is the input element the user clicked on if (this.checked) { mathComments.Show(); } else { mathComments.Hide(); } }); } catch (ex) {
alert(ex.toString());
}
});
</script>
Thanks me!