Using simple JavaScript in SharePoint

JavaScript is the headache for most of the .Net users.
And when it comes to SharePoint than it become worst.

Here I am posting how to use JavaScript to find element in SharePoint webpart or custom control.

Note: here we are using (usercontrol). ascx page for creating webpart or custom control.
For information check this link.

In generic ASP.Net we can use
“document.getElementsById” or
“document.getElementsByName“
to finding any controls or object.

But in SharePoint we cannot do the same.
In SharePoint we have to do something extra.

Here the details with example.
First what we have to do is that declare a variable for document.forms[0].

var objForm = document.forms[0];

Now we have loop through all the element of that document.
So for loop execute until all elements parsed.
We can find all elements by objForm.elements.length
Now in each control if you check source of that page which contain webpart then you can find
Each and every control has type
Like text box has type “Text”
Dropdown has type “Choice”
And etc…
Find particular object in that for loop like this way (this example for text box)

if (objForm.elements[j].type == "text" && objForm.elements[j].id.indexOf("_dtpDateTimeDate") != -1)

means an object with type is “text” and its id contains “_<<the id given by you>>”
that will be your object which you are looking for.
You can get its value by (alert is just to prompt)

alert(objForm.elements[j].value);

You can set and get value of that control or object.

You can call this script by onload of the window or by adding attribute of control and all that.

Here only thing to check is that
You have to add this script tag for your script to work in different browser.

<script language="javascript" type="text/javascript"> var isNS = (navigator.appName == "Netscape") ? 1 : 0; if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP); function mischandler(){ return false; } function mousehandler(e){ var myevent = (isNS) ? e : event; var eventbutton = (isNS) ? myevent.which : myevent.button; if((eventbutton==2)||(eventbutton==3)) return false; } document.oncontextmenu = mischandler; document.onmousedown = mousehandler; document.onmouseup = mousehandler; </script>

Here is the whole script

<!—first tag for cross browser functionality - ->
<script language="javascript" type="text/javascript"> var isNS = (navigator.appName == "Netscape") ? 1 : 0; if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP); function mischandler(){ return false; } function mousehandler(e){ var myevent = (isNS) ? e : event; var eventbutton = (isNS) ? myevent.which : myevent.button; if((eventbutton==2)||(eventbutton==3)) return false; } document.oncontextmenu = mischandler; document.onmousedown = mousehandler; document.onmouseup = mousehandler; </script>

<!—to start our script - ->
<script language="javascript" type="text/javascript">

//getting document form
var objForm = document.forms[0];

//calling this function on onload

window.onload = getobjectvalue;

//here I’m checking the date because date will be the most complex
//if you check the source then SharePoint date picker is itself textbox and an image with JavaScript
//so we can populate sharepoint date value by this and make any validation with date.
// we can also call this function on date changed or any button click. (Basic fundamentals)

function getobjectvalue();
{
for (j = 0; j < objForm.elements.length; j++)
{
if (objForm.elements[j].type == "text" && objForm.elements[j].id.indexOf("_dtpDateTimeDate") != -1)
{
Var TaskStartDate = objForm.elements[j].value;
alert('task start date : '+ TaskStartDate );
}
}

}
</script>

You can also use this script in custom control prepared with (usercontrol) .ascx.

Have fun.....