Where to add javascript


  • I've tried adding some javascript code to a few different sections of code but I'm not doing this correctly as the code is not executing.  Sometimes showing as HTML.

    One person said to add javascript to the PlaceHolderMain section.  When I do split or code view in SPD, I see this section, but it is yellow and un-edittable.

    I've also tried adding a Content Editor web part and then adding the javascript block here, but it just shows as HTML.

    Seems simple enough but I'm missing a step.


    Monday, October 04, 2010 2:37 AM


  • If this is simply for inputting an item into a list, the best way to do this is to create a new page, and then add a dataform to add new items, you will have complete control over every field in your form.
    • Marked as answer by Wayne Fan Friday, October 15, 2010 2:09 AM
    Tuesday, October 12, 2010 4:38 PM

All replies

  • You need to right click on the form you're trying to edit and then select edit file in advanced mode, then place your script right below the line <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
    Monday, October 04, 2010 4:39 PM
  • When you add it to the Content Editor Web Part, are you clicking EDIT SOURCE HTML ? or are you just entering it into the text field. If you enter it in the SOURCE it should will work fine. just make sure you encapsulate it in a <SCRIPT type="text/javascript" > ... </SCRIPT> Tag. I just tried it, it works fine.
    Monday, October 04, 2010 6:17 PM
  • Here's a screenshot to help you out, its a little obscure in 2010:


    Monday, October 04, 2010 6:21 PM
  • Gonna seem crazy, but I still can't find this "Edit HTML Source".  My content editor doesn't even look like yours.

    So I click on insert web part and then select "Content Editor" from the Media and Content section.  I now hae an area where I can type whatever I want or insert HTML controls, but I don't see the abiilty to edit the HTML directly.  So I switched to the Split view where I can see design and code and I do see where it looks like I can HTML.

    I may have found that it is that I'm not calling this javascript function properly, but I'm not sure how to do this either (not strong in Javascript yet).

    I am trying to disable a field because it gets its value from a workflow rule that fires after the new item is saved.  The script in the last post of the above seems to be what I need.  So it looks like the javascript functions are being created, but how do i call them? 

    do i use a body onLoad type event or is there something special with sharepoint since it uses master pages?  I'm assuming the javascript needs to run after the page loads.

    Any help appreciated!

    Tuesday, October 05, 2010 6:38 PM
  • Are you working in the browser? Or in SharePoint Designer? You should be editing the HTML source from the browser. There should be no split view..
    Wednesday, October 06, 2010 1:15 PM
  • Well you don't necessarily need a script for this. You could make it so that the field doesn't show up on any forms from the list settings on your sharepoint site, that way the field wont show up when you're adding a new item to the list, the downside of this is that the field wont show up on your edit form either. I don't know if this would be a problem for you or maybe it would even be better since that way user wont be able to edit the field later on either. In any case, Ill tell you how to do it anyway:

    Go to your sharepoint site on your browser and go to list settings of the list where you are working on and then go to advanced settings. Once there check yes on the "Allow Management of Content Types?" question and click ok. Then on the list settings page you should see a "content types" section, click on "item". You should now see a list with all your columns, click on the one you want to hide and then on column settings you can check the option Hidden, that's it, your field wont show up on any forms anymore.

    Now if you just want to disable the field on your new item form theres a couple ways you can do this. You can hide the field so the users wont see it at all...for this you don't need a script either, or you can make the field read only so the user will see it but wont be able to type anything in it.

    To just hide the field you can select that field on your DataFormWebPart and on it's properties you can set it's visibility to false on the properties box to the right.

    To make the field read only you do need a script. You can place this script or whatever script you wanna use right below the line <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">.. . you don't need a content editor, like this:

    <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
    <script type="text/javascript">_spBodyOnLoadFunctionNames.push("fillDefaultValues");

    function fillDefaultValues(){
        var theInput=getTagFromIdentifierAndTitle("input","","The Name of Your Field");


    function getTagFromIdentifierAndTitle(tagName,identifier,title){
      var len=identifier.length;
      var tags=document.getElementsByTagName(tagName);
      for(var i=0;i<tags.length;i++){
        var tempString=tags[i].id;
        if(tags[i].title==title && (identifier=="" ||
           tempString.indexOf(identifier)==tempString.length - len)){
          return tags[i];
      return null;

     Where "The name of your field" is the one you want to disable. Hope that helps.


    Wednesday, October 06, 2010 6:26 PM
  • Excellent advice.

    The part I think I'm getting hung on is that I am trying to make the field read only with the javascript code listed above but the form I am working with here is the NewForm.aspx.  In NewForm.aspx, using SPD, the list that has PlaceHolderMain seems to be within a code block.  It is all yellow highlighted and un-editable.

    So I tried using the web browser (instead of SPD) and I opened my list/NewForm.aspx.  I then click Site Actions and Edit Page.  On NewForm.aspx I do not have the option to edit HTML source.

    This make sense?

    Friday, October 08, 2010 3:31 AM
  • When you click Edit Page, you then have to click INSERT, then Add a Content Editor Web Part. Once that web part is in, you can access the HTML Source by selecting the Content Editor Web Part, then clicking the edit source link (See screen shot above)
    Friday, October 08, 2010 5:11 PM
  • Yeah I don't think you can do it on the NewForm.aspx from the browser, at least it doesn't show the Page tab on the ribbon or any way to insert anything for me. How are you opening the file on SPD? you need to open it in advanced mode, right click on it and choose "edit file in advanced mode" then it wont be yellow anymore and you can edit it.
    Monday, October 11, 2010 5:02 PM
  • I also don't have the Page tab on the ribbon.  I did what Omar suggested and manually went to the URL for NewForm.aspx.  From here I can click Site Actions and Edit Page and then I can insert a Content Editor Web Part and insert the javascript code.  It looks like this may or may not work, but the javascript code might be looking for the crazy long INPUT id for the field instead of the simple display name.

    For example, I have this field which is a hyperlink field that I want to disable:

    <td nowrap="true" valign="top" width="190px" class="ms-formlabel"><h3 class="ms-standardheader">
            <nobr>Display All Details</nobr>
            <td valign="top" class="ms-formbody">
            <!-- FieldName="Display All Details"
                <span dir="none">
            <span class="ms-formdescription">Type the Web address:&#160;(<a id="ctl00_m_g_955f13d1_c743_4da1_a0a2_1d186888862a_ctl00_ctl05_ctl06_ctl00_ctl00_ctl04_ctl00_ctl00_UrlControlId" href="javascript:TestURL('ctl00_m_g_955f13d1_c743_4da1_a0a2_1d186888862a_ctl00_ctl05_ctl06_ctl00_ctl00_ctl04_ctl00_ctl00_UrlFieldUrl')" target="_self">Click here to test</a>)
            &#160;<br /></span>
            <input name="ctl00$m$g_955f13d1_c743_4da1_a0a2_1d186888862a$ctl00$ctl05$ctl06$ctl00$ctl00$ctl04$ctl00$ctl00$UrlFieldUrl" type="text" value="http://" maxlength="255" id="ctl00_m_g_955f13d1_c743_4da1_a0a2_1d186888862a_ctl00_ctl05_ctl06_ctl00_ctl00_ctl04_ctl00_ctl00_UrlFieldUrl" title="Display All Details" class="ms-long" dir="ltr" onfocus=";" /><br />
            <span class="ms-formdescription">Type the description:&#160;<br /></span>
           <input name="ctl00$m$g_955f13d1_c743_4da1_a0a2_1d186888862a$ctl00$ctl05$ctl06$ctl00$ctl00$ctl04$ctl00$ctl00$UrlFieldDescription" type="text" maxlength="255" id="ctl00_m_g_955f13d1_c743_4da1_a0a2_1d186888862a_ctl00_ctl05_ctl06_ctl00_ctl00_ctl04_ctl00_ctl00_UrlFieldDescription" title="Description" class="ms-long" /><br />
                No Input, auto-generated

    I tried putting Display All Details in the javascript code but it does not make the control read only.  So then I tried ctl00$m$g_955f13d1_c743_4da1_a0a2_1d186888862a$ctl00$ctl05$ctl06$ctl00$ctl00$ctl04$ctl00$ctl00$UrlFieldUrl for the field name, but this too did not work.

    Know what I'm missing?





    Tuesday, October 12, 2010 1:33 PM
  • If this is simply for inputting an item into a list, the best way to do this is to create a new page, and then add a dataform to add new items, you will have complete control over every field in your form.
    • Marked as answer by Wayne Fan Friday, October 15, 2010 2:09 AM
    Tuesday, October 12, 2010 4:38 PM