Array issue [Archive] - CodingForums.com

longman

03-19-2009, 11:29 PM

Hi,

Below is the full code for an array table that I'm using to enter/store/sort/display a list of payments. It has been designed for best use with IE6 (it is not needed for any other browsers).

When all payments are entered, the user can then select the button to create a word doc with all the enterred payment details displayed.
The table itself works fine. The entire thing works well, bar 2 issues.

My main issue is with the spacing of the entries in the output doc. I can't use tabs as some of the individual entries are longer than others. I've found a function called addLength() which I'm trying to adapt to space out the items depending on pixel width of the characters (based on a separate array of character pixel lengths). I can't seem to get it to format correctly.

bascially, what I want is that whatever the length of the entries in the table, in the word doc, each field will line up. I'd also love for someone to explain exactly how addLength works, as I'm still learning.

Secondly, when the reset button is selected, how can I reset the paymentTable so that prev enterred items are removed. Press create doc button and select OK to reset and see what I mean.

I hope I've made sense.

<html>
<head>
<title>Payment Array Test</title>

<style type="text/css">

body {font-size: x-small; margin: 2px; color: #000000; font-family: verdana; background-color: #ffffff}
table {font-size: x-small}
h1 {font-weight: bold; font-size: medium; margin-bottom: 5px; font-family: verdana, arial, sans-serif}
h2 {font-weight: bold; font-size: small; margin-bottom: 4px; font-family: verdana, arial, sans-serif}
h3 {font-weight: bold; font-size: 11pt; margin-bottom: 3px; font-family: verdana, arial, sans-serif}
p {font-size: 10pt; color: black; font-family: verdana, arial, sans-serif}
a:link {color: #0000ff; font-family: verdana, arial, sans-serif}
a:visited {color: #800080; font-family: verdana, arial, sans-serif}
a:hover {color: #800080; font-family: verdana, arial, sans-serif; text-decoration: underline}
hr {color: #999999; height: 1px}
td {vertical-align: top; text-align: left; padding-right: 5px; padding-left: 5px; padding-bottom: 1px; padding-top: 1px; border-right: #FFFFFF 1px solid;}

</style>

<script language="VBScript">
Function VBvalidateDates(VBwhichDate)
VBvalidateDates = isdate(VBwhichDate)
End Function
</script>

<script language="Javascript">

var prevLastChar = ""

//array below holds the width in pixels of characters in the alphabet and a few other characters

var letterArray = new Array()

letterArray['A'] = 11
letterArray['B'] = 11
letterArray['C'] = 11
letterArray['D'] = 12
letterArray['E'] = 11
letterArray['F'] = 10
letterArray['G'] = 13
letterArray['H'] = 12
letterArray['I'] = 5
letterArray['J'] = 8
letterArray['K'] = 10
letterArray['L'] = 9
letterArray['M'] = 13
letterArray['N'] = 11
letterArray['O'] = 12
letterArray['P'] = 10
letterArray['Q'] = 12
letterArray['R'] = 12
letterArray['S'] = 11
letterArray['T'] = 9
letterArray['U'] = 12
letterArray['V'] = 11
letterArray['W'] = 14
letterArray['X'] = 11
letterArray['Y'] = 11
letterArray['Z'] = 10
letterArray['a'] = 9
letterArray['b'] = 9
letterArray['c'] = 8
letterArray['d'] = 9
letterArray['e'] = 9
letterArray['f'] = 5
letterArray['g'] = 9
letterArray['h'] = 9
letterArray['i'] = 3
letterArray['j'] = 3
letterArray['k'] = 8
letterArray['l'] = 3
letterArray['m'] = 13
letterArray['n'] = 9
letterArray['o'] = 9
letterArray['p'] = 9
letterArray['q'] = 9
letterArray['r'] = 5
letterArray['s'] = 8
letterArray['t'] = 5
letterArray['u'] = 9
letterArray['v'] = 7
letterArray['w'] = 11
letterArray['x'] = 7
letterArray['y'] = 7
letterArray['z'] = 8
letterArray['1'] = 9
letterArray['2'] = 9
letterArray['3'] = 9
letterArray['4'] = 9
letterArray['5'] = 9
letterArray['6'] = 9
letterArray['7'] = 9
letterArray['8'] = 9
letterArray['9'] = 9
letterArray['0'] = 9
letterArray['sl'] = 4
letterArray['sp'] = 4
letterArray['fs'] = 4

//payment array holds details of all the payments entered
paymentArray = new Array(40)
for (i=0;i<paymentArray.length;i++)
paymentArray[i] = new Array(6)

function doPaymentTable(action)
//adds/deletes payments to/from the payment list
{
notAllNull = false
tableSrc = "<br><table cellpadding=2 cellspacing=0 border=1 style='color:black;background-color:white;width:650;'>"
tableSrc += "<tr>"
tableSrc += "<td rowspan=2 id=pCellTL align=center>Payment Date</td>"
tableSrc += "<td rowspan=2 id=pCellT align=center width=67>Amount</td>"
tableSrc += "<td rowspan=2 id=pCellT align=center width=95>Paid to</td>"
tableSrc += "<td rowspan=2 id=pCellT align=center width=100>Payment Type</td>"
tableSrc += "<td colspan=2 id=pCellT align=center>Payment Period</td>"
tableSrc += "</tr>"
tableSrc += "<tr>"
tableSrc += "<td align=center id=pCell width=72>From</td>"
tableSrc += "<td align=center id=Pcell width=72>To</td>"
tableSrc += "</tr>"

if (action == "add")
{
if (VBvalidateDates(document.all.paymentDate.value))
{
for (i=0;i<40;i++)
{
if (paymentArray[i][0] == null)
{
if (document.all.paymentDate.value != "")
{
paymentArray[i][0] = document.all.paymentDate.value
paymentArray[i][1] = document.all.amount.value
paymentArray[i][2] = document.all.recipient.value
paymentArray[i][3] = document.all.method[document.all.method.selectedIndex].value
paymentArray[i][4] = document.all.periodFrom.value
paymentArray[i][5] = document.all.periodTo.value
document.all.paymentDate.value = ""
document.all.periodFrom.value = ""
document.all.periodTo.value = ""
}
}
}
}
else
alert("Please Enter a valid date.")
}
else
{
for (i=0;i<document.all.payments.length;i++)
{
if (document.all.payments[i].checked)
{
paymentArray[i-1][0] = null
paymentArray[i-1][1] = null
paymentArray[i-1][2] = null
paymentArray[i-1][3] = null
paymentArray[i-1][4] = null
paymentArray[i-1][5] = null
}
}

sortArray(paymentArray)
}

for (i=0;i<40;i++)
{
if (paymentArray[i][0] != null)
{
tableSrc += "<tr><td id=pCellL><input type=radio name=payments off style='color:black;'> " + paymentArray[i][0] + "</td>"
tableSrc += "<td id=pCell>$" + paymentArray[i][1] + "</td>"
tableSrc += "<td id=pCell>" + paymentArray[i][2] + "</td>"
tableSrc += "<td id=pCell>" + paymentArray[i][3] + "</td>"
tableSrc += "<td id=pCell>" + paymentArray[i][4] + "</td>"
tableSrc += "<td id=pCell>" + paymentArray[i][5] + "</td>"
notAllNull = true
}
}
if (notAllNull)
{
tableSrc += "</table>"
tableSrc += "<br><center style='margin-left:5px;'><input type=button value='Delete selected payment from list' onclick=javascript:doPaymentTable('delete')></center>"
document.all.paymentTable.innerHTML = tableSrc
}
else
document.all.paymentTable.innerHTML = ""
document.all.paymentDate.focus()
}

function sortArray(whichArray)
//called from doPaymentsTable, sorts the paymentArray
{
for (x=0;x<whichArray.length-1;x++)
{
for (y=x+1;y<whichArray.length;y++)
{
if (whichArray[x][0]==null && whichArray[y][0]!=null)
{
tempVar = whichArray[y]
whichArray[y] = whichArray[x]
whichArray[x] = tempVar
}
}
}
}

function addLength()
//called from buildDocument, cycles through payment array and spaces out fields so they line up when pasted into Word
{
for (x=0;x<40;x++)
{
if (paymentArray[x][0]!=null)
{
strWidth = 0
tempStr = paymentArray[x][1]

for (i=0;i<tempStr.length;i++)
{
if (tempStr.charAt(i) == "/" || tempStr.charAt(i) == " " || tempStr.charAt(i) == ".")
{
strWidth += 4
}
else
{
strWidth += eval("letterArray['" + tempStr.charAt(i) + "']")
}
}

for (i=strWidth;i<72;i++)
{
paymentArray[x][1] += " "
i = i + 8
strWidth += 4
}

strWidth = 0
tempStr = paymentArray[x][2]

for (i=0;i<tempStr.length;i++)
{
if (tempStr.charAt(i) == "/" || tempStr.charAt(i) == " " || tempStr.charAt(i) == ".")
{
strWidth += 4
}
else
{
strWidth += eval("letterArray['" + tempStr.charAt(i) + "']")
}
}

for (i=strWidth;i<120;i++)
{
paymentArray[x][2] += " "
i = i + 6
strWidth += 4
}
strWidth = 0
tempStr = paymentArray[x][3]

for (i=0;i<tempStr.length;i++)
{
if (tempStr.charAt(i) == "/" || tempStr.charAt(i) == " " || tempStr.charAt(i) == ".")
{
strWidth +=4
}
else
{
strWidth += eval("letterArray['" + tempStr.charAt(i) + "']")
}
}
for (i=strWidth;i<100;i++)
{
paymentArray[x][3] += " "
i = i + 6
strWidth += 4
}
}
}
}

function buildDocument()
//called from validateFields, produces the document for Word
{

addLength()

strDocument = "=Payment Details================================================\n"

if (paymentArray[0][0] != null)
{
strDocument += "Date\t Amount Recipient Type\t\t From\t To\n"
for (i=0;i<40;i++)
{
if (paymentArray[i][0] != null)
{
strDocument += "" + paymentArray[i][0] + " $" + paymentArray[i][1] + " " + paymentArray[i][2] + " "
strDocument += paymentArray[i][3] + "" + paymentArray[i][4] + "-" + paymentArray[i][5] + "\n"
}
}
}
else
strDocument += " No payments.\n"

document.all.txtaDocument.value += strDocument
document.all.txtaDocument.select()
txttoCopy = document.all.txtaDocument.createTextRange()
txttoCopy.execCommand("copy")

alert("Document has been copied and can now be pasted into Word.")
document.all.txtaDoc.innerHTML = "<input type=button value='Create document' onclick='javascript:validateFields();'><textarea style='width:585;font-family:MS Sans Serif;font-size:12pt;display:none;' rows=18 name=txtaDocument></textarea>"
resetq = confirm("Click OK to clear the form.")
if (resetq)
document.forms["form"].reset()
scroll(0,0)
}

function validateFields()
//validates all specified fields
{
errorMsg = "One or more required fields have not been completed or contain invalid data."

var valid = true

var nopaymentsok = true

if (paymentArray[0][0] == null)
{
nopaymentsok = confirm("You have not entered any payments, continue?")
}

if (!valid)
alert(errorMsg)
else
{
if (nopaymentsok)
buildDocument()
}
}

function dateField(whichField)
//adds "/" at appropriate points in dates
{
dateStr = whichField.value

if (prevLastChar != "/")
if (dateStr.length == 2 || dateStr.length == 5)
dateStr += "/"

if (prevLastChar == "/" && dateStr.length < prevLength)
dateStr = dateStr.substr(0,dateStr.length-1)

whichField.value = dateStr

prevLastChar = dateStr.charAt(dateStr.length-1)
prevLength = dateStr.length

if (dateStr.length == 10) whichField.select()
}

function inputMask(e,charsAllowed)
//validates textbox input against allowed characters
{
if (charsAllowed.indexOf(String.fromCharCode(e.keyCode)) == -1)
return false
}

</script>
</head>

<body>


<form name=form style='width:650;'>

<hr align=left color=#000000>
<p>Enter details of each relevant payment(s) and click the "Add payments to list" button.</p>
<table cellpadding=0 cellspacing=0 border=1 bgcolor=#fff585 style='width:650;border:1px solid #999999;'>
<tr>
<td rowspan=2 align=center><font color=black>Payment Date</font></td>
<td rowspan=2 align=center><font color=black>Amount</font></td>
<td rowspan=2 align=center><font color=black>Paid to</font></td>
<td rowspan=2 align=center><font color=black>Payment Type</font></td>
<td colspan=2 align=center><font color=black>Payment Period</font></td>
</tr>
<tr>
<td align=center><font color=black>From</font></td>
<td align=center><font color=black>To</font></td>
</tr>
<tr>
<td><input type=text name=paymentDate style='width:85;' maxlength=10 value='dd/mm/yyyy' onfocus='javascript:if (this.value=="dd/mm/yyyy") this.value=""' onkeyup=dateField(document.all.paymentDate) onkeypress='javascript:return inputMask(event,"1234567890")'></td>
<td><font color=black>$</font><input type=text name=amount style='width:60;' maxlength=8 onkeypress='javascript:return inputMask(event,"1234567890.")'></td>
<td><input type=text name=recipient style='width:100;' maxlength=15></td>
<td>
<select name=method>
<option value="Direct Payment ">Direct Payment</option>
<option value="Non-cash payment ">Non-cash payment</option>
<option value="Vehicle costs ">Vehicle costs</option>
<option value="Pre/School fees ">School fees</option>
<option value="Pre/School supplies ">School supplies</option>
<option value="Other ">Other</option>
</select>
</td>
<td><input type=text name=periodFrom style='width:85;' maxlength=10 value='dd/mm/yyyy' onfocus='javascript:if (this.value=="dd/mm/yyyy") this.value=""' onkeyup=dateField(document.all.periodFrom) onkeypress='javascript:return inputMask(event,"1234567890")'></td>
<td><input type=text name=periodTo style='width:85;' maxlength=10 value='dd/mm/yyyy' onfocus='javascript:if (this.value=="dd/mm/yyyy") this.value=""' onkeyup=dateField(document.all.periodTo) onkeypress='javascript:return inputMask(event,"1234567890")'></td></tr>
<tr><td align=center colspan=6>
<center><input type=button name=addPaymentBut value="Add payment to list" onclick=javascript:doPaymentTable("add")></center>
<input type=hidden name=payments></td></tr>
</table>

<div id=paymentTable style='width:650px;'> </div>

</form>

<hr align=left style='width:650px;' color=#000000><br>
<div style='width:500px' id=txtaDoc align=center><input type=button value='Create document' onclick='javascript:validateFields();'>
<textarea style='width:585;font-family:MS Sans Serif;font-size:12pt;display:none;' rows=18 name=txtaDocument></textarea></div>

</body>

<script language="Javascript">

if (document.body.offsetWidth < 552)
{
window.moveTo(0,0)
window.resizeTo(560,screen.height-27)
}
</script>
</html>