Important notice

Please note that this blog is discontinued here. All the posts are also coppied to my new blog at http://boris.gomiunik.net.
Important: Due to large amount of comment spam further commenting has been disabled here. If you wish to send me a comment, plase look up the same post on my new blog and leave comment there. Thanks!

7/17/2007

Refferencing SharePoint form fields with JavaScript

Sometimes you need to refference SharePoint form fields for manipulation. I usually use JavaScript. With SharePoint 2.0 you can refference a form field with

document.getElementsByName(urn:schemas-microsoft-com:office:office#Field_Name)[0]

where Field_Name is the SharePoint name of the field (you can find it at the end of URL when viewing properties of the field under "Modify Settings and columns". For example if I'd need to change the value of a form field Title, I'd use the following code:

document.getElementsByName('urn:schemas-microsoft-com:office:office#Title')[0].value = 'Boris'

Thus changing the value to Boris.

The story gets a bit more complicated with SharePoint 3.0. The names of fields now also contain ID of the form, which is constantly changing. The previous case in one of our forms would be

document.getElementsByName('ctl00$m$g_740df035_0c04_4906_89d7_cb38429413df$ctl00$ctl04$ctl00$ctl00$ctl00$ctl04$ctl00$ctl00$TextField')[0].value = 'Boris'

The problem occurs with changing ID of the form so you can't (at least that I know of) refference the form field value by name alone.

The solution here is using form titles. I've prepared a small javascript to get the form field by its type and title.

function getField(fieldType,fieldTitle) {
    var docTags = document.getElementsByTagName(fieldType);
    for (var i=0; i < docTags.length; i++) {
        if (docTags[i].title == fieldTitle) {
            return docTags[i]
        }
    }
}

Using this script now you can change the value of a title field with

getField('input','Title').value = 'Boris'

26 comments:

presack said...

Web BorG-

Nice post. I seemed to have more luck for some reason using getElementByID, but with the same "urn:schemas..." syntax that you blogged about.

However, I have not found any way to reference a choice (dropdown selection) field for some reason. The page will load without any errors, but I can not even get the control to fire a function that has a simple alert statement in it.

What I am trying to do is store the results of a selection of a dropdown choice box any time it is changed to a cookie, and then add script to automatically select that choice in the future.

Any help is greatly appreciated!

Thanks,
presack

Hari said...

Hi Presack,

Look at this:

http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

Markuso said...

Great job Presack.

I've also found a way to get a reference to a Radio Buttons Choice field type that was tricky to get at since it doesn't use the 'Title' attribute. Please see below:

http://blog.markuso.com/posts/9/using-javascript-to-access-a-list-form-field-in-sharepoint-designer/

Erik said...

Great post, got it working easily enough, but i have an issue.

Has anyone figured out how to access the time choice fields from a date/time field?

I can access it if it is just the date, but I haven't figured out how to access the time part of it.

Boris Gomiunik said...

Hi, Erik.

You can use the IE developer Toolbar to get the ID or Title of the field:

http://webborg.blogspot.com/2007/10/great-tools-for-web-developers-pt1.html

Anonymous said...

My requirement is that I need to create a custom column of type 'choice' for a list but the check boxes should appear in horizontal pattern rather than the default vertical pattern. Is it possible using javascript?

Boris Gomiunik said...

Unfortunately this is a bit tougher, because all of those options are in a table and every option is in its own row. I'm thinking one option is to make a CSS hack to display table rows inline, or make paralel checkboxes and with onClick event you check or uncheck these options.

Erik said...

Thanks for the great tip on that explorer Boris.

My problem is that the Date/Time fields are one field with a single Title but separate Id's. I can modify the date part of the field no problem, it's accessing the Hours/Minutes that is giving me grief. Everything I find will only work with Titles.

Is there a way to set the value of the field based on the ID? I know SP adds the page information to the front of the field ID's which makes it difficult to pick them out to set them.

Thanks.

Erik said...

On the drive home I figured out how to access the time fields, The id on the Hour/Minute fields use the same ID as the date field but with hours and minutes added to the end, So I added two new vars:
var myID_Hours
var myID_Minutes

Then added the following lines into your function above the return:
myID_Hours = docTags[i].id+"Hours";
myID_Minutes = docTags[i].id+"Minutes";

This lets me reference the Hour/Minute field with getElementByID

I hope this helps someone else. Drove me nutes. :D

Boris Gomiunik said...

Erik, that's great. Would you mind if I'd make an extra post about this?

Tanker said...

Go ahead. If you want the whole code let me know and I can email it to you.

Not sure you want it dumped here.
I logged in with my Google Id this time so if you want to reach me you can through that.

thanks

Tim said...

Hi,

I posted the script snippet for the toggle option on the MSDN blog page but I'm short on time and have a system about to go live where Date Picker is being used for the start and end time fields in a list and users are complaining that they have to manually type the dates in.

Can you please send me a copy of the routine you used, because I'm having trouble enabling it?

swiyyala said...
This comment has been removed by the author.
swiyyala said...

I was breaking my head over how to populate the Hyperlink field with a default value using javascript. I google searched it but didn’t find an answer.
What could be its tag name and identifier?
Well I now figured out and hope it would definitely help others.

FOR Hyperlink Field
Tag name- input
Identifier- URLFieldURL

And just remember that if you are defaulting the Hyperlink field to a local link on the system.
Replace “\” with “/”
For ex: “\\pbosfile06\policy\Application” Change that to “//pbosfile06/policy/Application”. It would now work fine without any problem.

We could use the same fucntion mentioned in this msdn blog getTagFromIdentifierAndTitle() found here
http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

Praveen said...

hi Presack,
great work. but i am facing a problem in get/set description value.
Any thoughts on this? if i catch the id of the description text area and set the value still not working. may be this is because of rendering in IFRMAE?

thanks for the help.
-Praveen.

Boris Gomiunik said...

Praveen, hi.

If you're reffering to enhanced rich text, it's a totally different story from getField. In that case you could use the SharePoint's native JavaScripts to manipulate the value.
But you're right, the issue is because it's rendered in an Iframe.

A tool that can help you a LOT is Internet Explorer Developer Toolbar (I'm writing about it here:)
http://boris.gomiunik.net/2007/10/great-tools-for-web-developers-pt1/

With this tool you can get the ID of the field and the iframe so you could use JavaScript to manipulate its DOM.

Praveen said...

Thanks for the reply.
i am using toolbar already. i found the id of the text area, iframe etc... but when i type some text in text area and click button, in java script alert box it always showing empty string. when it does post back once then alert box is showing with correct data. i don't know why this behavior is. i need some solution on this.
Any ideas appreciate it..

-Praveen.

Walter said...

Working with a Tasks list, all of the following work except for the AssignedTo value.

getField('input','Title').value = 'Boris';
getField('select','Priority').value = '(1) High';
getField('select','Status').value = 'In Progress';
getField('select','AssignedTo').value = 'Programmer, Rookie G';

Praveen said...

Hi Walter,
did you get the description [multi-text] filed? i am trying from long time to catch the data in the multitext box data. but didn't get it at all.
can you please tell me is that worked for you?

-PRaveen.

Walter said...

I found other code for the AssignedTo control, but these two aren't working...

getField('input','PercentComplete').value = '100%';
getField('Textarea','Body').value = 'Enter your description here.';

I didn't even try to manipulate the date fields. :-)

Walter said...

Opps... I wanted to have follow-up comments sent to me...

Praveen said...

yes, i am also facing the same problem.

because the multiline text box renders in iFRame. so in javascript it's not possible to catch the control. though i am trying in different ways. i will let you know, if i get any solution.

And about follow up the comment - while posting the comment, there is an option for subscribe. you need to check that.

-Praveen.

Boris Gomiunik said...

The best way to reference a simple (non-rich text) multiline field is with getField('textarea','FieldTitle').value or in some cases this might not, because different web browsers take different ways of getting the textarea value. You should combine the getField(...).innerText (for IE) or .textValue (for FF). The .innerHTML works for all.

For Rich text editing I recomend using SharePoint's built-in funciton (if I'm not mistaken it's pasteHTML). I have to check for more details.

I strongly recomend using the IE developer toolbar for getting field IDs, Titles or names. Most recomended is to work with titles, since IDs tend to change if you're migrating site.

Anonymous said...

I've tried to address the enhanced rich editor by
- descriptionField.value="abc";
and
- descriptionField.innerHTML ="abc";
and
- descriptionField.pasteHTM="abc";
nothing works.
Did anyone found an answer to this?

thx,

Boris Gomiunik said...

The rich html can't be refferenced like that. It has even an iframe so it's very difficult to get. For modifying the contents of that field you have to use the built-in pasteHTML function. You can see an example in the ERTE script (http://boris.gomiunik.net/erte).

manish patil said...

Hi champ,
Felt really good while going through the post. This is the same that I had on several occasions. But the only difference is that I went ahead and wrote javascript functions into the webpages(usually newform, editform.aspx) instead of the CEWP(even though I knew that on adding this &ToolPaneView=2 to url we can add webparts to the page).
Finally I must thanks for reminding me about the same.