2011-05-05

Setting Default Value in List's NewForm.aspx Using Javascript

I introduced how to get column data on each list items row in a Xslt List View WebPart in the previous blog post.



Today, I'd like to introduce how to create "links" by using column data and enable to copy the column data to textboxes. When the link is clicked and opened, another list's NewForm.aspx page will appear.


The scenario is like this :


  • If you click the link on each list items


  • "Title" value and "Categories" value of each list items are copied in another list's NewForm.aspx textboxes.   


In inside I created "Notice the Announce" link with URL's parameters which has "Title" value and "Categories" value.

http://sp2010/Lists/Notice/NewForm.aspx?title=Let's go to drink with us !!&category=invitation

And I copied URL's parameters to textboxes on NewForm.aspx using Javascript.



So, I'll show you steps ! Please check its !

  • Open AllItems.aspx and enable "Advanced Mode" and display xslt view. (see previous post.
  • Drag & Drop the ASP.NET HyperLink in a column.


  • You can check if the code is added in code view and design view.



  • Create a link in asp:HyperLink tag using NavigateURL property and change link name from "HyperLink" to "Notice the Announce".  (also see previous post.)

 http://sp2010/Lists/Notice/NewForm.aspx?title=&category=
Notice the Announce



  • Open another list's NewForm.aspx of the link target and enable "Advanced Mode".
  • Add Javascript code under the asp:content tag.





////////


The Javascript code details :
First, I added column data from URL's parameters to Array class instance.
Second, I made "copyColumnData" function and added column data from Array class instance to textboxes. "aspnetForm" means the name property in Form tag in html. "ctl00_m_g_f3ae55fa_9a6e_4277_b7b3_e011e50d2977_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" means the id property in its textbox's input tag in html. You can check it in NewForm.aspx html source.




Third, I added "copyColumnData" function as a listener in window.attachEvent method. "onload" means  window.attachEvent method is called after page load is finished.


  • Steps are done ! Save aspx pages and check the motion !



I see bellow blog post by reference. It's very understandable.
Passing default values to a SharePoint list's NewForm.aspx page.




I usually go to cafe on a weekend. I can concentrate a few hours.


3 comments:

  1. Note for Sharepoint 2010: you must use the last asp:Content block, otherwise your code will run before the form objects are rendered.

    The easiest way to get the id of the form objects is to use Chrome browser. Right-click on the item and choose Inspect Element.

    To get the parameters from the URL, I used the gup function (from netlobo, http://www.netlobo.com/url_query_string_javascript.html) and unescaped it to remove the %20 and other special characters:
    var caseNumberFieldId = "ctl00_m_g_8751 ... yourvalue here"
    var defaultCase = gup ("caseNumber")
    if (document.getElementById(caseNumberFieldId ) != null) {
    document.getElementById(caseNumberFieldId ).value = defaultCase ;
    }

    ReplyDelete
  2. Thanks for posting. I went ahead and look at and they are all interesting tutorials for me. All I needed to excel my skills in Javascript. Keep the good work!

    ReplyDelete
  3. AppDynamics is a good fit for organisations that have more complex, distributed application architectures which rely solely on Java and .NET technologies.

    ReplyDelete