Using Javascript to Manipulate a List Form Field

I am programing an Absence Request application in my company sharepoint just now, and i got a problem with how to validate two fields on a new list item form, then i serch by google and get a good solution that invoking JavaScript custom function. i plan to post that bolg helped me here for reviewing:

If you’re familiar with them, you may have noticed that in several of the application templates we use a bit of Javascript to set default form values based on the query string. Because we found this to be useful in many different cases throughout our applications, I wanted to share our method with you guys so that you can include it in the applications you develop.

When might you use this?

It’s pretty easy to set a field’s default value through the list settings in the browser UI, so why might you need Javascript to set a default field value? The reason is that field default values can only take static values or simple formulae based on the current user or today’s date. If that meets your needs, then I’d definitely recommend sticking with that method. Sometimes, though, you may want the form to fill with default values based on the user’s interaction with the previous page, and that’s exactly where this method comes in.

How does it work?

In short, we add some Javascript to the page that runs when the body is loaded. This Javascript parses the page’s query string, locates the HTML objects that are rendered by the relevant SharePoint fields, and sets their value based on the information in the query string.

getTagFromIdentifierAndTitle

The most important part of our solution is the “getTagFromIdentifier” function. This function finds the HTML element rendered by a given SharePoint FormField control. It takes the following parameters:

*tagName – The name of the tag rendered in the form’s HTML
*identifier – The string associated with the SharePoint type of the relevant field
*title – The value of the relevant HTML tag’s “title” attribute, which also matches the field’s display name
Here’s a partial table of SharePoint column types and their corresponding “identifiers” and “tagNames”:


SharePoint-Field-Type----identifier--------tagName-
Single-Line-of-Text------TextField---------input-
Multiple-Lines-of-Text---TextField---------input-
Number-------------------TextField---------input-
Currency-----------------TextField---------input-
Choice-(dropdown)--------DropDownChoice----select-
Lookup-(single)*---------Lookup------------select-
Lookup-(multiple)--------SelectCandidate;--SelectResult-select-
Yes/No-------------------BooleanField------input-


*Lookups are a bit more complicated because Lookup FormFields render differently when the target list contains more than 20 items. See the end of the post for an example.

function getTagFromIdentifierAndTitle(tagName, identifier, title) {

var len = identifier.length;

var tags = document.getElementsByTagName(tagName);

for (var i=0; i < tempstring =" tags[i].id;" title ="=" identifier ="=" qs =" location.search.substring(1," args =" qs.split(" vals =" new" i="0;" nameval =" args[i].split(" temp =" unescape(nameVal[1]).split('+');" type="text/javascript">> to the value stored in the querysting variable

// identified by <>





// Customize this javascript by replacing <> and

// <> with appropriate values.

// Then just paste it into NewForm.aspx inside PlaceHolderMain



_spBodyOnLoadFunctionNames.push("fillDefaultValues");



function fillDefaultValues() {

var qs = location.search.substring(1, location.search.length);

var args = qs.split("&");

var vals = new Object();

for (var i=0; i < nameval =" args[i].split(" temp =" unescape(nameVal[1]).split('+');">>", vals["<>"]);

}



function setLookupFromFieldName(fieldName, value) {

if (value == undefined) return;

var theSelect = getTagFromIdentifierAndTitle("select","Lookup",fieldName);



// if theSelect is null, it means that the target list has more than

// 20 items, and the Lookup is being rendered with an input element



if (theSelect == null) {

var theInput = getTagFromIdentifierAndTitle("input","",fieldName);

ShowDropdown(theInput.id); //this function is provided by SharePoint

var opt=document.getElementById(theInput.opt);

setSelectedOption(opt, value);

OptLoseFocus(opt); //this function is provided by SharePoint

} else {

setSelectedOption(theSelect, value);

}

}



function setSelectedOption(select, value) {

var opts = select.options;

var l = opts.length;

if (select == null) return;

for (var i=0; i < l; i++) {

if (opts[i].value == value) {

select.selectedIndex = i;

return true;

}

}

return false;

}



function getTagFromIdentifierAndTitle(tagName, identifier, title) {

var len = identifier.length;

var tags = document.getElementsByTagName(tagName);

for (var i=0; i < tags.length; i++) {

var tempString = tags[i].id;

if (tags[i].title == title && (identifier == "" tempString.indexOf(identifier) == tempString.length - len)) {

return tags[i];

}

}

return null;

}

[/script]

Add JavaScript Date Validation into List Item forms

//--验证date有效性，end date必须等于或者大于start date

function PreSaveAction()
{
var date1 = getTagFromIdentifierAndTitle("INPUT","DateTimeFieldDate","Start Date");
var date2 = getTagFromIdentifierAndTitle("INPUT","DateTimeFieldDate","End Date");
var arrDate1 = date1.value.split("/");
var useDate1 = new Date(arrDate1[2], arrDate1[1]-1, arrDate1[0]);
var arrDate2 = date2.value.split("/");
var useDate2 = new Date(arrDate2[2], arrDate2[1]-1, arrDate2[0]);
if(useDate1 > useDate2)
{
alert("The End Date cannot happen earlier than the Start Date");
return false; // Cancel the item save process
}
return true; // OK to proceed with the save item
}


reference: http://edinkapic.blogspot.com/2007/10/add-javascript-date-validation-into.html