adding javascript to Sharepoint 2010

Question

I am trying to add some javascript code to my list, but i am not having any luck with it. My goal is to:

1. page loads no check boxes are checked
2. when user checks one box a second check box will be checked at the same time and the others will gray out. Can anyone help me with this?

Here is my testing example that i am not having any luck with...

<![CDATA[<script type="text/javascript">
   function enableTextBox() 
   {
        if (document.getElementById("ctl00_m_g_6b2cd800_765f_4cff_860f_53b0a713a6c4_ff61_ctl00_ctl02").checked = true)

        alert("I am an alert box!");

    }
        </script>

    ]]>

Answer 1

Based on your code I am going to assume that you are a bit new to JavaScript. My suggestion is that you check out the site http://PluralSight.com as they have excellent training on JavaScript development and SharePoint as well as the JavaScript Client Object Model.

For the record I am in no way affiliated with them, I just use and love their service.

Learn the fundamentals of JavaScript and practice with tools like http://JSFiddle.net

Here is a JSFiddle with your code that runs when the page loads. http://jsfiddle.net/RobertKaucher/wMGbb/

Here is one that uses jQuery to attach to the change event on the radio button.

http://jsfiddle.net/RobertKaucher/B3s9v/

Please see the tutorials on http://jquery.org/ or on PluralSight for more information on how to use it.

Answer 2

Are you calling enableTextBox() anywhere? If not, your code would never be called.

Probably what you want is the onchange event

For basic Javascript questions such as this one, as opposed to Sharepoint client object model or "it works on a plain html page but not in Sharepoint" type questions, Stackoverflow would be a better resource.

Answer 3

use jQuery, hosting the jQuery libraries either on the server or on the site locally. You can then either add your own jQuery plugin and call it or call your code directly. Then add a content editor webpart to the list edit form using SharePoint Designer.

An example would be:

<script language="javascript" type="text/javascript" src="/Style Library/jquery-1.8.1.js"></script>
<script language="javascript" type="text/javascript" src="/Style Library/myjquery.projectFile.js"></script>  
<script language="javascript" type="text/javascript">
$(document).ready(function () {
   alert($("input[title='" + "MyFieldsTitle" + "']")attr('CHECKED')); 
}
</script>

Be aware that SharePoint form html is... difficult, therefore a simple Yes/No field uses the adds the html attribute 'CHECKED' with value 'checked' only if the item is checked, otherwise it is simply omitted.