Refferencing SharePoint form fields with JavaScript
Filed Under (SharePoint, SharePoint administration) by Boris Gomiunik on 17-07-2007
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’
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
Hi Presack,
Look at this:
http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx
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/
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.
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
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?
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.
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.
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.
Erik, that’s great. Would you mind if I’d make an extra post about this?
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
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?
[...] that equals the field display name, so you can easily use the getField function that is published here. So you can also easily bind an “onchange” event to [...]