SharePoint uses scripts to bind events to forms

In the use of SharePoint, we often need to do some special processing of the form page, such as the new page when there are multi-option fields, but only select the specified number of options, especially in the News list or survey list and other special scenes, widely used.

Below, we'll show you how to use JavaScript scripts to handle such problems in the foreground, especially if user is more familiar with web development and familiar with the tools provided by various browsers to modify HTML pages. We need to bind the eventreceiver on the list, forcing non-conforming data to be saved.

To create a list of the samples needed, there is no more than 2 options for customizing the new page and selecting News type. The example list is as follows, with only the title, Body, News type three fields, and the fields from the list library.

Here we use jquery scripts, because it's easier to manipulate than JavaScript, and we add scripts that can use the Content Editor webpart, or use SharePoint Designer opens the NewForm.aspx page for SharePoint directly. We open it here using SharePoint Designer because it's relatively easy to write code and modify it.

At the same time, we also demonstrate how to use the Content editor to add scripts, so that you can make different attempts, such as:

First click on the top right gear, if there is no such button, stating that your permissions are only visitors, need to have the editor page permissions of the user, click on the Edit page to enter the editing status.

Click Add WebPart on the page, select the Content Editor WebPart, steps such as:

We will first edit this webpart and click on "Edit Web part", such as:

Generally edit the Title property and Chrome Type, the former generally write the role of this part, the latter is to remove the parts of the title and the border (I am here for the sake of beauty, remove the middle width and height of the setting, we do not take offense);

Then select the WebPart and click Edit Source on the Ribbon menu to add code to it, such as:

Sometimes you also need to click the "click here to add new content" in order to see the ribbon above and try it if you can't see it.

The way to use WebPart is described above, we use SharePoint Designer to add scripts (scripts added to the content Editor WebPart also apply):

Open SharePoint Designer and select Open site, if you have previously opened it, you can select it in the recent site:

In Site name fill in our site collection address, click Open can be opened website, may pop-up login box need to login, enter the Windows account username and password (e.m:domain/linyu password);

Then find the location where the form exists and note the path, such as:

Right-click the page you want to modify, and edit this page in advanced mode, such as:

A reference to jquery is typically added first and then scripted, such as:

The following is a saved page demo, you can only tick two options, such as:

Here is another demonstration, that is, you can check multiple, but cannot save, will prompt (the specific differences please refer to the script), such as:

The complete script part, because oneself is not the professional front-end development, perhaps the script writes the comparison rough, everybody forgive, as follows:

1<script type="Text/javascript">2 $ (function () {3     //Add a new Savebutton while hiding the old Savebutton4$("#onetIDListForm input[type= ' button '][value= ' Save ']"). Before ("<input type= ' button ' class= ' Newsavebutton ms-buttonheightwidth ' value= ' Save ' ></input>"). Hide ();5     6     //If the option is greater than 2, you will not be allowed to select a new option.7$("#onetIDListForm input[type= ' checkbox '][id^= ' Newstype ']"). Change (function () {8         if($("#onetIDListForm input[type= ' checkbox '][id^= ' Newstype ']:checked"). length >2)9         {Ten$( This). Removeattr ("checked"); OneAlert"The News type option cannot exceed 2, and if new options are needed, remove the unwanted options"); A             //$ ("#onetIDListForm input[type= ' checkbox '][id^= ' Newstype ']:checked:first"). Removeattr ("checked"); -         } -     }); the      -     //bind the Click event for the newly added Savebutton, if the option is greater than 2 hint, if not greater than 2, click Default Savebutton -$("#onetIDListForm. Newsavebutton"). Click (function () { -         if($("#onetIDListForm input[type= ' checkbox '][id^= ' Newstype ']:checked"). length >2) +         { -Alert"The News type option cannot exceed 2, and if new options are needed, remove the unwanted options"); +         } A         Else at         { -$("#onetIDListForm input[type= ' button '][value= ' Save '][id$= ' SaveItem ']"). Click (); -         } -      -     }) - }); in</script>

The complete code, such as:

Postscript

In fact, the whole process is relatively simple, recently found a lot of people are asking, how to add WebPart in the page, how to add a script in a WebPart, how to control the related elements on the page; So, give yourself a simple example, to the people who need a reference bar.

Not what advanced things, but also hope to have a lost value, feel good, help a praise it!

SharePoint uses scripts to bind events to forms