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.