<< How to add/customize Edit Page option in SiteAction menu | How to make DotNetBlogEngine search box to work with AJAX AutoCompleteExtender control >>

How to add a new event to controls in ListFormWebPart on the EditFrom.aspx / NewFrom.aspx pages

by James 2/24/2008 3:29:00 PM

Background - The controls in EditForm.aspx and NewForm.aspx pages you see when you add/edit a item in SharePoint list library are generated by ListFormWebPart.

The problem - We want to attach a new event to the button (or any controls in this page). For example, we want to popup a javascript alert message when user click on "OK" button without breaking current onclick event.

Solution - This can be easily done by using javascript. And re-register onclick event for the OK button.

First, we need to find out the ID used by OK button control. When you view the source html of EditForm.aspx/NewForm.aspx, you can see the ID of OK button is ending with "SaveItem".

We also need to find out the default onclick event script of this OK button. So that we can insert our custom script at beginning of the default script or append it after.

From above screen shot we can see that default onclick event begins with string "If (PreSaveItem()).....". So we are going to replace this with our custom script. "alert('you have clicked OK');if (!PreSaveItem())"

The actual JavaScript like following: (The script can be warpped within <script> tag and put insided <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> in NewForm.aspx and EditForm.aspx )

[code:js]

_spBodyOnLoadFunctionNames.push("StartUpCustomScript");
function StartUpCustomScript() {
    ChangeOkButtonOnclickEvent("Input","SaveItem");
}
function ChangeOkButtonOnclickEvent(tagName, identifier) {
    var len = identifier.length;
    var tags = document.getElementsByTagName(tagName); /*find all Input type controls on page (ie. control with tag <Input/>)*/
    for (var i=0; i < tags.length; i++) {
        var tempString = tags[i].name;
        if(tempString.indexOf(identifier) == tempString.length-len ) /*find any Input type controls on page has its name ending with 'SaveItem'*/
        {
           /*if found, replace it default onclick with our custom script*/
           var func = tags[i].attributes["onclick"].value.replace("if (!PreSaveItem())","alert('you have clicked OK');if (!PreSaveItem())");
           /*remove its default onclick event*/
           tags[i].onclick = null;
           /*re-register its onlick event with new script*/
           tags[i].attachEvent("onclick",new Function(func));
       }
    }
    return null;
}

[/code]

And now we click on OK button, we can see our Alert message :)

Currently rated 2.5 by 2 people

Currently 2.5/5 Stars.
1
2
3
4
5

Tags: javascript, sharepoint, customize, web parts

Programming | SharePoint

Microsoft.SharePoint.WebControls.SoapDataSource - An easy way to create web service data source in SharePointSoapDataSource from Microsoft.SharePoint assembly is a concreted class of BaseXmlDataSource and also...How To Create AJAX-enabled SharePoint Web Part with UpdatePanel and UpdateProgress in 10 minutesCreate Ajax-enabled SharePoint web part with UpdateProgress control for visual feedback in browser w...How to use SharePoint Delegate Control to change the navigate URL of Manage Links (My Links)To customize the navigate URL of Manage Links use SharePoint Delegate Control.

Comments

7/23/2008 12:57:32 AM

Hi James,

i tried by this way but when it comes to this line - var func = tags[i].attributes["onclick"].value.replace("if (!PreSaveItem())","alert('you have clicked OK');if (!PreSaveItem())");

it is not changing the string by replace function.In var func, always the same dopostback is calling.

Can you please tell me why it is happening here and is there any other way to do this.

What i need to do is, i need to close the alert window after clicking on "OK" button there on page (SubNew.aspx). But first it must complete the alert functionality.

ravi

8/4/2008 12:36:53 PM

James, I'm having the same issue.
The page still postbacking. How can I avoid this?
Jose.

Jose Soares

8/4/2008 12:57:44 PM

James and ravi, sorry for my last post. Didn't do too much investigation before posting it.
Basically what I believe that James want to show is the flexibility of replacing/rewriting the functions used on the submit event for EditFrom.aspx / NewFrom.aspx pages.
In the example written above James just show how to insert a simple alert before the PreSaveItem() function(responsible for posting back).
If for example you want to force the user to match your validation before calling the PreSaveItem() you will need then to use a simple "return false;". This will avoid the call for the next function. That would be useful for form validations.
Example:
var func = tags[i].attributes["onclick"].value.replace("if (!PreSaveItem())","alert('you have clicked OK');return false;if (!PreSaveItem())");

Hope I've helped.
Jose.

Jose Soares

8/4/2008 3:39:06 PM

Find below my solution:

function ChangeOkButtonOnclickEvent(tagName, identifier) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName); /*find all Input type controls on page (ie. control with tag <Input/>)*/
for (var i=0; i < tags.length; i++) {
var tempString = tags[i].name;
if(tempString.indexOf(identifier) == tempString.length-len ) /*find any Input type controls on page has its name ending with 'SaveItem'*/
{
/*if found, replace it default onclick with our custom script*/
var func = tags[i].attributes["onclick"].value = "submitvalidation();";
/*remove its default onclick event*/
tags[i].onclick = null;
/*re-register its onlick event with new script*/
tags[i].attachEvent("onclick",new Function(func));
}
}
return null;
}

function submitvalidation() {
//if condition is false do
if (1==1){
alert("Fill in all required fields"){
}
//post back
else {
if (!PreSaveItem())
return false;
WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$m$g_21c8b658_3d2e_4d74_8b56_37465b087bdf$savebutton2$ctl00$diidIOSaveItem", "", true, "", "", false, true))
}
}

On that example I hard coded the submit btn id, but you can use advantage of blogs.msdn.com/.../...ulate-a-list-form-field.aspx
to get the submit.name dynamically.

Jose!

Jose Soares

8/5/2008 12:05:57 PM

Here I go again...
IE and Firefox handle differently event registration.
So for example, the solution above will only work on IE.
To have a cross browser solution(IE/Firefox), you will need to handle conditions for the 2 browser. The solution is simple:
The function called ChangeOkButtonOnclickEvent(tagName, identifier) will need to have an extra condition to handle the 2 browsers possibilities.
Find below my function:

function ChangeOkButtonOnclickEvent(tagName, identifier) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName); /*find all Input type controls on page (ie. control with tag <Input/>)*/
for (var i=0; i < tags.length; i++) {
var tempString = tags[i].name;
if(tempString.indexOf(identifier) == tempString.length-len ) /*find any Input type controls on page has its name ending with 'SaveItem'*/
{
/*if found, replace it default onclick with our custom script*/
var func = tags[i].attributes["onclick"].value = "submitvalidation();";
/*remove its default onclick event*/
if (navigator.appName == "Microsoft Internet Explorer") {
tags[i].onclick = null;
/*re-register its onlick event with new script*/
tags[i].attachEvent("onclick",new Function(func));
}

}
}
return null;
}