Wednesday, September 29, 2010

Sharepoint 11 - Javascript in sharepoint edit form(1)

During my work, in the sharepoint edit form, I want one field be composed from another 2 fields:

I have some explanation of why I did in this way instead of using Calculated field:
1. The purpose here is to build the client side scripts to get some field can be intelligent input. So the value shows on the page only and they are not stored in server side.
--username, currently the template is not easy to use and it jumps out a dialog and we may also change to intelligent input in this direction
2. Some fields are not avaliable to the calculated field such as look up fields, sometimes username et al.
3. We want to strictly get the values on form/page, retrieve from server may change the values.
4. In my following case, it provides a intelligent input. As long as the user don't change the scroll down selection items. The text will not changed. And the user can still changed the title as he want before storing the data by click "OK" button.



The step is:

Step 1: In the item editform display page, add 2 paramters to the URL: PageView=Shared&ToolPaneView=2

Step 2: Add the Content Editor Webparts

Step 3. I wrote code like:

< Script>
var e = document.getElementById('ctl00_m_g_c7e99c14_1b78_4b18_95db_a232d74a99f4_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_Lookup');
var txt1= e.options[e.selectedIndex].innerText;
e.onchange=function(){myfunc()};


var ee = document.getElementById('ctl00_m_g_c7e99c14_1b78_4b18_95db_a232d74a99f4_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_DropDownChoice');
var txt2= ee.options[ee.selectedIndex].innerText;
ee.onchange=function(){myfunc()};


var tbox = document.getElementById('ctl00_m_g_c7e99c14_1b78_4b18_95db_a232d74a99f4_ctl00_ctl04_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_TextField');
if (tbox)
{
tbox.value = txt1+'('+txt2+')';
}

function myfunc()
{
txt1= e.options[e.selectedIndex].innerText;

txt2= ee.options[ee.selectedIndex].innerText;

tbox.value = txt1+'('+txt2+')';
}

< /Script>

There is little issue with above code, as innertext of IE and FF are use different functions. We need change here.

We can write the function like the below to fix the issue.

function getObjInnerText (obj)
{
return (obj.innerText) ? obj.innerText : (obj.textContent) ? obj.textContent : "";
}

No comments: