SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dhtml form calculations

    hey guys,

    I'm having problems with a quotesheet I'm writing. It, in essence, works like an Excel spreadsheet. There will be a list of products, dynamically created from a database using PHP, but I want to do the calculations clientside to prevent excess trips to the server. It seems it should be easy to multiply the contents of one cell (price) by the contents of another cell, which is an input form to enter quantity, aptly named qty, to come up with a total, called simply, total. Maybe someone could help me figure out this DHTML...I hate it and I'm sure I'm overlooking things.
    Code:
    <table align="center" width="760px" cellspacing="0" cellpadding="0">
      <form id="quoteForm" action="/Web Projects/quote.php" method="post">
        <tr>
          <th class="tablehead1">Item</th>
          <th class="tablehead2">Price</th>
          <th class="tablehead2">Qty</th>
          <th class="tablehead2">Total</th>
        </tr>
        <tr>
          <td id="prod1">Item 1</td>
          <td id="price1">60.00</td>
          <td id="qty1">
            <input type="text" id="qty1" size="4" maxlength="4"value="0" 
            onblur="javascript:total = (document.table.prod1.value * document.quoteForm.qty1.value)" />
          </td>
          <td id="total1">
            <script type="text/javascript">
              document.write(total)
            </script>
          </td>
        </tr>
    I know I'm totally off here. Can someone help...

    Sketch
    Aaron Brazell
    Technosailor



  2. #2
    SitePoint Evangelist azizur_rahman's Avatar
    Join Date
    Nov 2001
    Location
    London, UK
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sketch

    Here is what you need... although there's bug but as long as the price dont have dicimal value it will be fine....

    let me know if you can fix the decimal formating....

    Code:
     
     
    <html>
    <head>
    <meta name=VI60_defaultClientScript content=JavaScript>
    <title>DHTML FORM CALCULATION</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language=javascript>
    <!--
    function calculate_total(Item_Price,Quantity,TotalToCell)
    {
    	if (!document.layers && !document.all)
    	{
    		return;
    	}
    	else
    	{
    		// this does not work with dicimal numbers
    		// Item_Total = parseInt(parseInt(Item_Price) * parseInt(Quantity));
    
    		// this will but there's problem with nmber of decimal in total
    		// I am not sure about client side formating.. its does not work
    		Item_Total = (parseFloat(Item_Price) * parseInt(Quantity));
    	}
    
    	if (document.layers)
    	{
    		document.layers.TotalToCell.document.write(Item_Total);
    		document.layers.TotalToCell.document.close();
    	}
    	else if (document.all)
    	{
    		TotalToCell.innerHTML = Item_Total;
    	}
    
    }
    //-->
    </script>
    </head>
    
    <body bgcolor="#FFFFFF" text="#000000">
    <form name="frmMain" method="post" action="">
      <table width="100%" border="1" cellspacing="0" cellpadding="0">
    	<tr align="center" bgcolor="#666666"> 
    	  <td nowrap><b><font color="#FFFFFF">Item</font></b></td>
    	  <td nowrap><b><font color="#FFFFFF">Price</font></b></td>
    	  <td nowrap><b><font color="#FFFFFF">Qty</font></b></td>
    	  <td nowrap><b><font color="#FFFFFF">Total</font></b></td>
    	</tr>
    	<tr bgcolor="#CCCCCC"> 
    	  <td align="center">Item 1</td>
    	  <td align="center">&pound; 60.00 
    		<input type="hidden" name="Item_1_price" value="60.00">
    	  </td>
    	  <td align="center"> 
    		<input type="text" name="qty1" size="4" maxlength="4" value="0"
    		  onBlur="JavaScript: calculate_total(document.frmMain.Item_1_price.value,document.frmMain.qty1.value,Item1total);">
    	  </td>
    	  <td align="center"><b>  <span id="Item1total" style="position:relative;"></span></b></td>
    	</tr>
      </table>
    </form>
    </body>
    </html>
    Hope that helps...

    Let me me know how you get on....

    if you need more help you know where to find me.
    Azizur Rahman
    Web Application Developer

  3. #3
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going to be away for the day so I'll give this a whirl tonight. My first thoughts are that I'm going to have problems. We're talking about a quotesheet here. Currency has decimals and I'm not sure that I can do without that functionality... I'll try it out though.

    Sketch
    Aaron Brazell
    Technosailor



  4. #4
    SitePoint Evangelist azizur_rahman's Avatar
    Join Date
    Nov 2001
    Location
    London, UK
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a try with formatCurrency(value,NumberOfDecimal) function...

    this works on the server side and I know that it does not works on client side. maybe parseFloat() or something may work...

    are you doing this for Intranet or Internet?

    I'll ask a friend of my and see what he says...
    Azizur Rahman
    Web Application Developer

  5. #5
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm doing it for an intranet, but plan to make the whole thing available as a package later. I'm sorry I did not try your code last night. I got caught up in doing my taxes and....whoosh...there went my evening.

    Sketch
    Aaron Brazell
    Technosailor



  6. #6
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I tried to use this script. I just don't get it. I mean, I grasp the concept, but just get errors. Let me also say that this code is generated by a PHP script. This is the HTML it produces (or portion thereof):
    Code:
    </style>
    <script type="text/javascript">
    function calculate_total(Item_Price,Quantity,TotalToCell)
    {
    	if (!document.layers && !document.all)
    	{
    		return;
    	}
    	else
    	{
    		// this does not work with dicimal numbers
    		// Item_Total = parseInt(parseInt(Item_Price) * parseInt(Quantity));
    
    		// this will but there's problem with nmber of decimal in total
    		// I am not sure about client side formating.. its does not work
    		Item_Total = (parseFloat(Item_Price) * parseInt(Quantity));
    	}
    
    	if (document.layers)
    	{
    		document.layers.TotalToCell.document.write(Item_Total);
    		document.layers.TotalToCell.document.close();
    	}
    	else if (document.all)
    	{
    		TotalToCell.innerHTML = Item_Total;
    	}
    
    }
    //-->
    
    </script>
    </head>
    	<body>		<table width="100%">
    			<table align="center" width="760px" cellspacing="0" cellpadding="0">
    <form id="frmMain" action="/Web Projects/Virtual Office/hs~quote.php" method="post">
    <tr>
    	<th class="tablehead1">Item</th><th class="tablehead2">Price</th><th class="tablehead2">Qty</th><th class="tablehead2">Total</th>
    </tr>
    <tr>
    	<td id="prod1">Item1</td>
    	<td id="price1">60.00	<input type="hidden" name="Item_1_price" value="60.00"></td>
    	<td id="qty1"><input type="text" id="qty1" size="4" maxlength="4"value="0" 
    	onBlur="javascript: calculate_total(document.frmMain.Item_1_price.value,document.frmMain.qty1.value,Item1total);">
    </td>
    	<td align="center">$<span id="Item1total" style="position:relative;"></span></td>
    </tr>
    <tr>
    	<td id="prod2">Item 2</td>
    	<td id="price2">25.00	<input type="hidden" name="Item_2_price" value="25.00"></td>
    	<td id="qty2"><input type="text" id="qty2" size="4" maxlength="4"value="0" 
    	onBlur="javascript: calculate_total(document.frmMain.Item_2_price.value,document.frmMain.qty2.value,Item2total);">
    The error is:
    Error: 'document.frmMain.Item_1_price is null or not an object.


    Where am I wrong?

    Sketch
    Aaron Brazell
    Technosailor



  7. #7
    SitePoint Evangelist azizur_rahman's Avatar
    Join Date
    Nov 2001
    Location
    London, UK
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have tried the code on its own?

    what happend to ?

    Code:
    <form name="frmMain" method="post" action="">
    this should be
    Code:
    <form id="frmMain" name="frmMain" action="/Web Projects/Virtual Office/hs~quote.php" method="post">
    make sure you have name="frmMain" or what ever you want to call the form.... change the code accordingly... you've got the id="frmMain" which is fine but try name="frmMain" as well they both can be there at the same time.
    Azizur Rahman
    Web Application Developer

  8. #8
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh...wait! DOH! Stupid error. It works now! Thanks.

    Sketch
    Aaron Brazell
    Technosailor



  9. #9
    SitePoint Evangelist azizur_rahman's Avatar
    Join Date
    Nov 2001
    Location
    London, UK
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross Platform Check

    Have you done cross browser and cross platform checking?

    make sure you can handle that if you're going to make it a ready made off shelf product.

    Let me know when you finish. OK
    Azizur Rahman
    Web Application Developer

  10. #10
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It won't be avaialbe off the client's intranet for a long time. I'm just building for them...IE5.5, NT4.

    Sketch
    Aaron Brazell
    Technosailor




Bookmarks

Posting Permissions

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