Building a Multi-Page Article System With ASP/PHP - The JavaScript Behind it All

(Page 3 of 6 )

I love JavaScript because it's so flexible and powerful when used correctly (read: not used to popup ad's or confuse you). If you aren't competent with JavaScript then I would highly recommend reading up on it. 

Anyway, now to the JavaScript used in our article system. Each button is linked to a JavaScript function. Some of these functions are described below:

AddPage
This function is activated when the "Add Page" button is clicked. It takes the title and content and adds them to a JavaScript array which is used to keep track of all the pages contained in the new article.

Its code looks like this:

function AddPage()
{
var pageTitle = new String();
var pageContent = new String();
var acount = arrTitles.length;
var thisForm = document.frmAdd;

if(acount < 20)
{
pageTitle = document.frmAdd.contentTitle.value;
pageContent = document.frmAdd.contentBody.value;

if(pageTitle.length == 0)
{ alert('You must enter a title for this page first.');
document.frmAdd.contentTitle.focus();
return;
}

if(pageContent.length == 0)
{ alert('You must enter some content for this page first.');
document.frmAdd.contentBody.focus();
return;
}

arrTitles[acount] = pageTitle;
arrContents[acount] = pageContent;

document.frmAdd.contentTitle.value = '';
document.frmAdd.contentBody.value = '';

ReloadPages();

document.frmAdd.contentTitle.focus();
}
else
{ alert('This article can have a maximum of twenty pages. Adding this page would exceed the limit.');
document.frmAdd.contentTitle.focus();
document.frmAdd.contentTitle.select();
}
}

ClearPages
This function is activated when the "Remove All Pages" button is clicked. It empties the arrays that contain the titles and content for each of the pages in this article.

It looks like this:

function ClearPages()
{
if(confirm('Warning: You are about to delete all of the pages from this article. Click OK to continue.'))
{
var thisForm = document.frmAdd;

arrTitles.length = 0;
arrContents.length = 0;
ReloadPages();

for(counter=0; counter<thisForm.articlePages.length; counter++)
{ thisForm.articlePages[counter].selected = false; }

thisForm.contentTitle.value = '';
thisForm.contentBody.value = '';
thisForm.cmdAdd.disabled = false;
thisForm.cmdUpdate.disabled = true;

thisForm.contentTitle.focus();
}
}

MoveUp
This function is called when the "<" button is clicked. It moves the selected page up one spot in the list of pages. For example, if you selected page 2 in the list and clicked this button, then the MoveUp function would swap page 2 with page 1, this moving page 2 to the top of the list.

It looks like this:

function MoveUp()
{
var thisForm = document.frmAdd;

if(thisForm.articlePages.selectedIndex > 0)
{
thisIndex = thisForm.articlePages.selectedIndex-1;
tmp1 = arrTitles[thisForm.articlePages.selectedIndex-1];
tmp2 = arrTitles[thisForm.articlePages.selectedIndex];
tmp3 = arrContents[thisForm.articlePages.selectedIndex-1];
tmp4 = arrContents[thisForm.articlePages.selectedIndex];
arrTitles[thisForm.articlePages.selectedIndex] = tmp1;
arrTitles[thisForm.articlePages.selectedIndex-1] = tmp2;
arrContents[thisForm.articlePages.selectedIndex] = tmp3;
arrContents[thisForm.articlePages.selectedIndex-1] = tmp4;

ReloadPages();

thisForm.articlePages.selectedIndex = thisIndex;
}
}

DelPage
This function is called when the "x" button is clicked. It removes the selected page from the article. It does so by removing the title and content indexes in the JavaScript arrays for the selected page. It basically shifts any pages in front of the selected page one spot back in the array, overwriting the selected page with the one in front of it and reducing the size of the array by one.

It looks like this:

function DelPage()
{

var thisForm = document.frmAdd;
var thisIndex = thisForm.articlePages.selectedIndex;

if(thisIndex > -1)
{
if(confirm('Warning: You are about to delete this page from the article. Click OK to continue.'))
{

var a = 0;

var newTitles = new Array();
var newContents = new Array();

for(i = 0; i < arrTitles.length; i++)
{
if(i != thisIndex)
{
newTitles[a] = arrTitles[i];
newContents[a] = arrContents[i];
a = a + 1;
}
}

arrTitles = newTitles;
arrContents = newContents;

for(counter=0; counter<thisForm.articlePages.length; counter++)
{ thisForm.articlePages[counter].selected = false; }

ReloadPages();

document.all.contentTitle.value = '';
document.all.contentBody.value = '';
document.all.cmdAdd.disabled = false;
document.all.cmdUpdate.disabled = true;

thisForm.contentTitle.focus();

}
}
else
{
alert('Please select an article to delete.');
thisForm.contentPages.focus();
}
}

AddPages
This function is called when the "Add Article to Database" button is clicked. It loops through the title and content arrays which are used to hold the pages for the article and outputs each one into a hidden form variable which are then submitted with the form.

It looks like this:

function AddPages()
{
var thisForm = document.frmAdd;
var docLength = arrTitles.length;
var hasTitle = thisForm.articleTitle.value == '' ? false : true;
var hasSummary = thisForm.articleSummary.value == '' ? false : true;

if(hasTitle && hasSummary && docLength >= 1)
{
for(counter=0; counter < docLength; counter++)
{
x = counter + 1;
eval("thisForm.pageTitle"+x+".value = arrTitles["+counter+"];");
eval("thisForm.pageContent"+x+".value = arrContents["+counter+"];");
}
}
else
{
alert('Please make sure that you have entered an article title and summary and at least one page.');
thisForm.contentTitle.focus();
return false;
}

return true;
}

That's the bulk of the JavaScript. Don't worry if you don't understand it. Let's now get onto the ASP/PHP code to put our article into a database. I will also show you how to retrieve, list and display each article.

Next: Saving Articles to the Database >>
 

More ASP Articles
More By Mitchell Harper

Comments On: Building a Multi-Page Article System With ASP/PHP

>>> Be the FIRST to comment on this article!