Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14

Thread: Array issue

  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    98
    Thanks
    24
    Thanked 4 Times in 4 Posts

    Array issue

    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.

    Code:
    <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;'>&nbsp;" + 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>
    
    <!-- Create input webform -->
       <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>
    Last edited by longman; 03-19-2009 at 11:48 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    You know, if you'd just make the FONT for the .doc file be COURIER or COURIER NEW, then you wouln't have to worry about character widths. All characters would be same width.

    For ANY kind of accounting report, surely this would be much more appropriate!

    Even as it is, your character widths table will ONLY be valid for ONE PARTICULAR FONT! So how do you ensure that the HTML and the word doc are using *that* font??

    But there *is* another way, you know:

    Produce a <TABLE> in HTML, with all the numbers aligned on the right side of each <TD> cell, and now it WILL line up. Regardless of the font used.

    OH! I see! You are dumping the doc out to the clipboard. Ugh. No wonder you have problems.

    Why not just pop it up in a new window, with the font and/or <table> so it's formatted properly, and let them copy/paste it from there?

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Yeah, I just replace your code that does this:
    Code:
            document.all.txtaDocument.value += strDocument
            document.all.txtaDocument.select()
            txttoCopy = document.all.txtaDocument.createTextRange()
            txttoCopy.execCommand("copy")
    with this:
    Code:
    var w = window.open("junk.doc","JUNK");
    w.document.write("<html><body style='font-family: courier new;'>DOC:<pre>" + strDocument + "</pre></body></html>");
    And indeed a window popped up that I could then copy/paste the entire contents of into WORD and it was formatted correctly. Well, almost. I didn't correct your spacing.

    Again, though, this would be even easier if you'd just produce a <TABLE> in HTML. Then Word would align things no matter what.

    Why not just take the table you already have and alter it slightly??

  • #4
    New Coder
    Join Date
    Mar 2007
    Posts
    98
    Thanks
    24
    Thanked 4 Times in 4 Posts
    Hi,

    Thanks for the reply. I understand what you are saying, but I am limited with options. Basically, even though I have posted code with the end result being a word doc, in actual usage, the output will be copied as a note into a proprietary program that will not recognise tables or html, it will only recognise basic formatting (tabs, spaces, carriage returns etc), hence all the messing around. The notes also have size restriction of 3900 characters (including spaces) so I need to keep it compact.

    I know the addLength function is one answer, I just need to crack the code fully to understand it. Any ideas?

    Of course I'm open to other suggestions.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Well, is there ANY possibility of ensuring that the importing program will use a fixed-width font? That is, Courier or similar??

    As I said, all that gobbledy-gook with addLength() is only there for some specific proportional font. Heck, it won't even work if the font used by the proprietry program is different than whatever font the table was created for.

    Fixed width font is actually reasonably easy, just using padding with spaces.

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    why doesn't that allow the user to input data ?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Why doesn't WHAT allow the user to input data, TinyScript?? His original code?

    Are you running it in MSIE? It won't work in any other browsers.

  • #8
    New Coder
    Join Date
    Mar 2007
    Posts
    98
    Thanks
    24
    Thanked 4 Times in 4 Posts
    Yeah, it's designed for use on IE6. Never tested it on Mozilla or any others as I don't need to.

    For the system I'm working on, the standard is Verdana 9pt, which I understand differs from any other font and should never be used for web. I'll play around with others, courier most likely and see what I can do, I'll just have to try and get the "bosses" to accept that is how it is.

    Cheers!

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Definitely won't work on anything but IE, since it uses a VBScript function. Could be re-written to use JS only, but why bother if it's only for use in this purpose.

  • #10
    New Coder
    Join Date
    Mar 2007
    Posts
    98
    Thanks
    24
    Thanked 4 Times in 4 Posts
    Agreed!

    Hey, any idea on my other issue with resetting. Using the resetq function it resets the form only. How can I get it to reset the paymentTable back to default as well?

    Thanks.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Can't you just do
    document.all.paymentTable.innerHTML = "";
    ???

  • #12
    New Coder
    Join Date
    Mar 2007
    Posts
    98
    Thanks
    24
    Thanked 4 Times in 4 Posts
    Yeah, thanks mate, I knew that, my brain just wasn't relaying it to the rest of me, all sorted now.

    Cheers!

  • #13
    New Coder
    Join Date
    Mar 2007
    Posts
    98
    Thanks
    24
    Thanked 4 Times in 4 Posts
    Further issue with the array:

    using innerHTML clears the table entries from the form, but the entries are retained in the array, so that when a new entry is added to the table, both the new and old entries appear. Any ideas?

  • #14
    New Coder
    Join Date
    Mar 2007
    Posts
    98
    Thanks
    24
    Thanked 4 Times in 4 Posts
    hi All,

    Just a quick note to say thanks for the help, I have resolved this issue. I just wrote a quick function to declare the array each time and call it whenever the form is reset. It may not be pretty, but it works exactly as I need it.

    Code:
    	function cleartable()
    	{
    	if (resetq)
    	  {
    	  document.all.paymentTable.innerHTML=""
          	  paymentArray = new Array(40)
          	  for (i=0;i<paymentArray.length;i++)
           	  paymentArray[i] = new Array(6)
    	  }
    	}


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •