none
how to apply java script to New Item form in sharepoint 2010?

    Question

  • Hi all,

    I am having contact list. I want to create a form for that list. So from SharePoint Designer i click on New Item Form  and create the form. Now the Problem is hoe can i add java script to fields like Email, Phone Number Etc. Please Suggest me a way to apply the java script to item from my list. 

    • Moved by Lhan HanModerator Wednesday, March 07, 2012 8:20 AM sp2010 (From:SharePoint - Enterprise Content Management (pre-SharePoint 2010))
    Tuesday, March 06, 2012 1:05 PM

Answers

  • hi suneetha,

    thanks for reply.

    I insert html form web part but it is not working. what i have done is i have created one list and then from designer i created a new item form as shown below but i am unable to apply java script to fields such as Email and Phone no. because this fields are list fields and if i try to give any script code in between it is giving me error. I am also attaching screen shot of my field.


    • Edited by Amol.Amol Wednesday, March 07, 2012 4:11 AM
    • Marked as answer by Amol.Amol Friday, June 15, 2012 9:39 AM
    Wednesday, March 07, 2012 4:10 AM
  • Hi Amol,

    This is what you need to do.

    You have to insert a new HTML Form Web Part in the same New Item Form page within which the jquery/javascript code will have to be written. In order to apply javascript to the "Email" field, you have to drill down to the specific td node using jQuery and then call the appropriate action on it. Please refer the below example:

    This is the code that needs to be written in order to hide a row completely. There is a structure based on which every new/edit/view item forms are created, as per which, the label Email is enclosed within a <nobr> tag, unless you have modified the default code.

    jQuery("nobr:contains('Email')").closest('tr').hide();

    Another example is this - here a value is assigned to the text box.

    var trTag = jQuery("nobr:contains('Email')").closest('tr');
    document.getElementById("inputTextEmail").value = jQuery(trTag).find("input[title='Email']").attr("value");

    Please note that depending upon the type of control, the class name also changes viz., ms-RadioText for choice dropdown, inputText for Single Line of Text etc. This way, you can trigger client side scripts on any action through the functions click(), hide(), mouseover(), mouseout() etc.

    Last but not least, jQuery is just one way of doing this. The same can be done by writing a client side function and invoking that on an action. Example -

    <td onmouseover='javascript:Test();'>Email:</td>

    Hope this clarifies your doubt. Let me know if you still ain't clear.

    Thanks

    • Proposed as answer by Suneetha V Thursday, March 08, 2012 11:28 PM
    • Marked as answer by Amol.Amol Friday, March 16, 2012 7:10 AM
    Wednesday, March 07, 2012 6:08 PM

All replies

  • Hi Amol,

    You can insert an HTML Form Web Part on the page and add javascript/jQuery to the specific fields by enclosing the code within the <script type="text/javascript"></script> tag.

    Thanks

    Tuesday, March 06, 2012 9:00 PM
  • hi suneetha,

    thanks for reply.

    I insert html form web part but it is not working. what i have done is i have created one list and then from designer i created a new item form as shown below but i am unable to apply java script to fields such as Email and Phone no. because this fields are list fields and if i try to give any script code in between it is giving me error. I am also attaching screen shot of my field.


    • Edited by Amol.Amol Wednesday, March 07, 2012 4:11 AM
    • Marked as answer by Amol.Amol Friday, June 15, 2012 9:39 AM
    Wednesday, March 07, 2012 4:10 AM
  • Hi Amol,

    This is what you need to do.

    You have to insert a new HTML Form Web Part in the same New Item Form page within which the jquery/javascript code will have to be written. In order to apply javascript to the "Email" field, you have to drill down to the specific td node using jQuery and then call the appropriate action on it. Please refer the below example:

    This is the code that needs to be written in order to hide a row completely. There is a structure based on which every new/edit/view item forms are created, as per which, the label Email is enclosed within a <nobr> tag, unless you have modified the default code.

    jQuery("nobr:contains('Email')").closest('tr').hide();

    Another example is this - here a value is assigned to the text box.

    var trTag = jQuery("nobr:contains('Email')").closest('tr');
    document.getElementById("inputTextEmail").value = jQuery(trTag).find("input[title='Email']").attr("value");

    Please note that depending upon the type of control, the class name also changes viz., ms-RadioText for choice dropdown, inputText for Single Line of Text etc. This way, you can trigger client side scripts on any action through the functions click(), hide(), mouseover(), mouseout() etc.

    Last but not least, jQuery is just one way of doing this. The same can be done by writing a client side function and invoking that on an action. Example -

    <td onmouseover='javascript:Test();'>Email:</td>

    Hope this clarifies your doubt. Let me know if you still ain't clear.

    Thanks

    • Proposed as answer by Suneetha V Thursday, March 08, 2012 11:28 PM
    • Marked as answer by Amol.Amol Friday, March 16, 2012 7:10 AM
    Wednesday, March 07, 2012 6:08 PM
  • Hi Suneetha,

    I use this and it is giving me error that this is not allowed. I try One other thing. I change this field <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Phone_x0020_Number" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Phone_x0020_Number')}" />

    To <asp:TextBox runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Phone_x0020_Number" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Phone_x0020_Number')}" />

    This work fine. This accepts Java Script.

    Friday, March 16, 2012 7:09 AM