HOW TO Create Terms and Conditions page in SharePoint using HTML/jQuery/List Web Service

The code below shows how to create a Terms and Conditions page in SharePoint using HTML/jQuery/List Web Service. It uses the UpdateListItem method to create an Item in the SharePoint List.

 

Embed the entire code in a Content Editor Web Part.

 

 

<script type="text/javascript"

src="http://intranet.na.kraft.com/sites/TC/jQuery/jquery-1.3.2.min.js"></script>

 

<script type="text/javascript"

src="http://intranet.na.kraft.com/sites/TC/jQuery/jquery.SPServices-0.5.6.min.js"></script>

 

 

<SCRIPT>

 

$(document).ready(function() {

$("#btnAccept").click(function()

{

 

//alert("jQuery - You clicked the Accept button");

var chkBoxField = document.getElementById("chkBoxAccept");

    if (chkBoxField.checked == false )

{

alert("Please click the checkbox to accept the Terms and Conditions.");

return false;

}

else

{

//Create a New Item in the SharePoint List

//We are going to capture only the Yes responses in the SP List

//Name of SP List is - American Express Terms and Conditions

CreateNewAmExItem();

 

//Redirect the user to the AmEx Instructions page

location.href="http://intranet.na.kraft.com/sites/TC/Expenses/Pages/AmericanExpressFormInstructio

ns.aspx";

}

 

});

 

 

$("#btnCancel").click(function()

 

{

 

//This function is called when the user clicks on the Cancel button

alert("You clicked Cancel. You will now be redirected to the My Travel and Expense site Home

page.");

 

//Redirect the user to the Home page

location.href="http://intranet.na.kraft.com/sites/TC/";

 

});

 

 

});

 

</SCRIPT>

 

 

<script type="text/javascript">

 

function CreateNewAmExItem() {

 

//The new Item in the SP List is created here

//alert ("In CreateNewAmExItem");

 

//Get Current Date

var currentTime = new Date();

var month = currentTime.getMonth() + 1;

var day = currentTime.getDate();

var year = currentTime.getFullYear();

 

 

//Get Current User's First Name and Last Name

var firstName = $().SPServices.SPGetCurrentUser({

                   fieldName: "FirstName"

});

 

var lastName = $().SPServices.SPGetCurrentUser({

                   fieldName: "LastName"

});

 

//Build the current date

var currentDate = month + "/" + day + "/" + year;

 

//Store the current user name

var currentUserName = firstName + " " + lastName

 

//Set the Title

var title = "Terms and Conditions - Acceptance Information";  

 

//alert("Title = " + title);

//alert ("Current User Name: " + currentUserName);

//alert ("Today's date is: " + currentDate);

 

 var batch =

        "<Batch OnError=\"Continue\"> \

            <Method ID=\"1\" Cmd=\"New\"> \

                <Field Name=\"Title\">" + title + "</Field> \

                <Field Name=\"User_x0020_Name\">" + currentUserName + "</Field> \

<Field Name=\"Accepted_x0020_On\">" + currentDate + "</Field> \

                </Method> \

        </Batch>";

 

    var soapEnv =

        "<?xml version=\"1.0\" encoding=\"utf-8\"?> \

        <soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \

            xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \

            xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \

          <soap:Body> \

            <UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \

              <listName>American Express Terms and Conditions</listName> \

              <updates> \

                " + batch + "</updates> \

            </UpdateListItems> \

          </soap:Body> \

        </soap:Envelope>";

 

    //alert("Batch = " + batch);

    //alert("SoapEnv = " + soapEnv);

 

$.ajax({

        url: "http://intranet.na.kraft.com/sites/TC/expenses/_vti_bin/lists.asmx",

        beforeSend: function(xhr) {

            xhr.setRequestHeader("SOAPAction",

            "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");

        },

        type: "POST",

        dataType: "xml",

        data: soapEnv,

        contentType: "text/xml; charset=\"utf-8\""

    });

 

}

 

 

 

//-->

</script>

 

 

 

 

 

<BR>

<TABLE width="800px" align="center">

 

<TR>

<TD><SPAN class=ms-rteCustom-Kraft_Major_Headline>Employee Certification and Manager's Approval

for American Express and AT&amp;T VTNS Corporate Card</SPAN></TD>

</TR>

 

<TR>

<TD>

<P><SPAN class=ms-rteCustom-Kraft_Body>I certify that I am an employee of Kraft Foods and that I

am authorized to receive an American Express and an AT&T VTNS Corporate Card to be used for

business purposes of the Company under the terms of our existing agreement with American Express

Travel Related Services Company, Inc. and Virtual Telecommunications Network Services.</SPAN>

</P>

 

<P><SPAN class=ms-rteCustom-Kraft_Body>I understand the American Express Corporate Card will be

linked to the AT&T Calling Card and a monthly billing statement will come from American Express

covering all AT&T Calling Card charges.</SPAN> </P>

 

<P><SPAN class=ms-rteCustom-Kraft_Body>I understand that I am personally responsible to pay for

all charges and fees billed to my American Express Corporate Card and I authorize Kraft Foods to

deduct the amount of any past due Corporate Express cash balances charged to my Corporate Card

from any amounts owed to me (including salary, vacation, and/or separation pay).</SPAN></P>

 

<P><SPAN class=ms-rteCustom-Kraft_Body>I agree to surrender the card immediately upon my

retirement or upon termination of employment. </SPAN></P>

 

<P><SPAN class=ms-rteCustom-Kraft_Body><STRONG>I understand that the card is to be used ONLY for

Business purposes and I am directly responsible for REVIEWING AMEX statements monthly to ensure

charges and expenses are accurate. Utilization of this card for personal use is STRICTLY

prohibited and is in direct violation of Company Policy and may result in disciplinary action up

to and including termination.</STRONG></SPAN></P>

</TD>

</TR>

<TR>

<TD>&nbsp;</TD>

</TR>

<TR>

<TD>

<input type="checkbox" value="0" id="chkBoxAccept"><SPAN class=ms-rteCustom-Kraft_Body>Click the

checkbox to accept the above Terms and Conditions.</SPAN>

</TD>

</TR>

<TR>

<TD>&nbsp;</TD>

</TR>

<TR>

<TD>

<input type="button" value="Accept" id="btnAccept">

<input type="button" value="Cancel" id="btnCancel">

</TD>

</TR>

 

 

</TABLE>