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

    Soru

  • 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. 

    • Taşıyan Lhan HanModerator 07 Mart 2012 Çarşamba 08:20 sp2010 (From:SharePoint - Enterprise Content Management (pre-SharePoint 2010))
    06 Mart 2012 Salı 13:05

Yanıtlar

  • 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.


    • Düzenleyen Amol.Amol 07 Mart 2012 Çarşamba 04:11
    • Yanıt Olarak İşaretleyen Amol.Amol 15 Haziran 2012 Cuma 09:39
    07 Mart 2012 Çarşamba 04:10
  • 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

    • Yanıt Olarak Öneren Suneetha V 08 Mart 2012 Perşembe 23:28
    • Yanıt Olarak İşaretleyen Amol.Amol 16 Mart 2012 Cuma 07:10
    07 Mart 2012 Çarşamba 18:08

Tüm Yanıtlar

  • 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

    06 Mart 2012 Salı 21:00
  • 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.


    • Düzenleyen Amol.Amol 07 Mart 2012 Çarşamba 04:11
    • Yanıt Olarak İşaretleyen Amol.Amol 15 Haziran 2012 Cuma 09:39
    07 Mart 2012 Çarşamba 04:10
  • 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

    • Yanıt Olarak Öneren Suneetha V 08 Mart 2012 Perşembe 23:28
    • Yanıt Olarak İşaretleyen Amol.Amol 16 Mart 2012 Cuma 07:10
    07 Mart 2012 Çarşamba 18:08
  • 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.

    16 Mart 2012 Cuma 07:09