By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,847 Members | 2,321 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,847 IT Pros & Developers. It's quick & easy.

sending the pricelist by mail in ajax

P: 15
Hi,


I am new to ajax.I am doing a pricelist form using ajax.I downloaded a sample code from the net(Dhtmlgoodies.com-shopping cart programme) and I am modifying it.(url:http://www.dhtmlgoodies.com/scripts/fly-to-basket/fly-to-basket.html).I want the shopping cart items price list to be sent by mail.Pl. guide me
Jan 11 '08 #1
Share this Question
Share on Google+
5 Replies


dmjpro
100+
P: 2,476
Hi,


I am new to ajax.I am doing a pricelist form using ajax.I downloaded a sample code from the net(Dhtmlgoodies.com-shopping cart programme) and I am modifying it.(url:http://www.dhtmlgoodies.com/scripts/fly-to-basket/fly-to-basket.html).I want the shopping cart items price list to be sent by mail.Pl. guide me
Paste the sample code so that we can figure out the problems you have.

Debasis Jana
Jan 11 '08 #2

P: 15
Hi,

Thanks.I have given the sample codes below.
1.fly-to-basket.js

Expand|Select|Wrap|Line Numbers
  1. /************************************************************************************************************
  2. (C) www.dhtmlgoodies.com, March 2006
  3.  
  4. This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.    
  5.  
  6. Terms of use:
  7. You are free to use this script as long as the copyright message is kept intact. However, you may not
  8. redistribute, sell or repost it without our permission.
  9.  
  10. Version:
  11.     1.0    Released    March. 3rd 2006
  12.  
  13. Thank you!
  14.  
  15. www.dhtmlgoodies.com
  16. Alf Magne Kalleland
  17.  
  18. ************************************************************************************************************/
  19.  
  20. var flyingSpeed = 25;
  21. var url_addProductToBasket = 'addProduct.php';
  22. var url_removeProductFromBasket = 'removeProduct.php';
  23. var txt_totalPrice = 'Total: ';
  24.  
  25.  
  26. var shopping_cart_div = false;
  27. var flyingDiv = false;
  28. var currentProductDiv = false;
  29.  
  30. var shopping_cart_x = false;
  31. var shopping_cart_y = false;
  32.  
  33. var slide_xFactor = false;
  34. var slide_yFactor = false;
  35.  
  36. var diffX = false;
  37. var diffY = false;
  38.  
  39. var currentXPos = false;
  40. var currentYPos = false;
  41.  
  42. var ajaxObjects = new Array();
  43.  
  44.  
  45. function shoppingCart_getTopPos(inputObj)
  46. {        
  47.   var returnValue = inputObj.offsetTop;
  48.   while((inputObj = inputObj.offsetParent) != null){
  49.       if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
  50.   }
  51.   return returnValue;
  52. }
  53.  
  54. function shoppingCart_getLeftPos(inputObj)
  55. {
  56.   var returnValue = inputObj.offsetLeft;
  57.   while((inputObj = inputObj.offsetParent) != null){
  58.       if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
  59.   }
  60.   return returnValue;
  61. }
  62.  
Expand|Select|Wrap|Line Numbers
  1. function addToBasket(productId)
  2. {
  3.     if(!shopping_cart_div)shopping_cart_div = document.getElementById('shopping_cart');
  4.     if(!flyingDiv){
  5.         flyingDiv = document.createElement('DIV');
  6.         flyingDiv.style.position = 'absolute';
  7.         document.body.appendChild(flyingDiv);
  8.     }
  9.  
  10.     shopping_cart_x = shoppingCart_getLeftPos(shopping_cart_div);
  11.     shopping_cart_y = shoppingCart_getTopPos(shopping_cart_div);
  12.  
  13.     currentProductDiv = document.getElementById('slidingProduct' + productId);
  14.  
  15.     currentXPos = shoppingCart_getLeftPos(currentProductDiv);
  16.     currentYPos = shoppingCart_getTopPos(currentProductDiv);
  17.  
  18.     diffX = shopping_cart_x - currentXPos;
  19.     diffY = shopping_cart_y - currentYPos;
  20.  
  21.  
  22.  
  23.     var shoppingContentCopy = currentProductDiv.cloneNode(true);
  24.     shoppingContentCopy.id='';
  25.     flyingDiv.innerHTML = '';
  26.     flyingDiv.style.left = currentXPos + 'px';
  27.     flyingDiv.style.top = currentYPos + 'px';
  28.     flyingDiv.appendChild(shoppingContentCopy);
  29.     flyingDiv.style.display='block';
  30.     flyingDiv.style.width = currentProductDiv.offsetWidth + 'px';
  31.     flyToBasket(productId);
  32.  
  33. }
  34.  
  35.  
  36. function flyToBasket(productId)
  37. {
  38.     var maxDiff = Math.max(Math.abs(diffX),Math.abs(diffY));
  39.     var moveX = (diffX / maxDiff) * flyingSpeed;;
  40.     var moveY = (diffY / maxDiff) * flyingSpeed;    
  41.  
  42.     currentXPos = currentXPos + moveX;
  43.     currentYPos = currentYPos + moveY;
  44.  
  45.     flyingDiv.style.left = Math.round(currentXPos) + 'px';
  46.     flyingDiv.style.top = Math.round(currentYPos) + 'px';    
  47.  
  48.  
  49.     if(moveX>0 && currentXPos > shopping_cart_x){
  50.         flyingDiv.style.display='none';        
  51.     }
  52.     if(moveX<0 && currentXPos < shopping_cart_x){
  53.         flyingDiv.style.display='none';        
  54.     }
  55.  
  56.     if(flyingDiv.style.display=='block')setTimeout('flyToBasket("' + productId + '")',10); else ajaxAddProduct(productId);    
  57. }
  58.  
Expand|Select|Wrap|Line Numbers
  1. function showAjaxBasketContent(ajaxIndex)
  2. {
  3.     // Getting a reference to the shopping cart items table
  4.     var itemBox = document.getElementById('shopping_cart_items');
  5.  
  6.     var productItems = ajaxObjects[ajaxIndex].response.split('|||');    // Breaking response from Ajax into tokens
  7.  
  8.     if(document.getElementById('shopping_cart_items_product' + productItems[0])){    // A product with this id is allready in the basket - just add number items
  9.         var row = document.getElementById('shopping_cart_items_product' + productItems[0]);
  10.         var items = row.cells[0].innerHTML /1;
  11.         items = items + 1;
  12.         row.cells[0].innerHTML = items;
  13.     }else{    // Product isn't allready in the basket - add a new row
  14.         var tr = itemBox.insertRow(-1);
  15.         tr.id = 'shopping_cart_items_product' + productItems[0]
  16.  
  17.         var td = tr.insertCell(-1);
  18.         td.innerHTML = '1';     // Number of items
  19.  
  20.         var td = tr.insertCell(-1);
  21.         td.innerHTML = productItems[1];     // Description
  22.  
  23.         var td = tr.insertCell(-1);
  24.         td.style.textAlign = 'right';
  25.         td.innerHTML = productItems[2];     // Price    
  26.  
  27.         var td = tr.insertCell(-1);
  28.         var a = document.createElement('A');
  29.         td.appendChild(a);
  30.         a.href = '#';
  31.         a.onclick = function(){ removeProductFromBasket(productItems[0]); };
  32.         var img = document.createElement('IMG');
  33.         img.src = 'images/remove.gif';
  34.         a.appendChild(img);
  35.         //td.innerHTML = '<a href="#" onclick="removeProductFromBasket("' + productItems[0] + '");return false;"><img src="images/remove.gif"></a>';    
  36.     } 
  37.  
  38.  
  39.     updateTotalPrice();
  40.  
  41.     ajaxObjects[ajaxIndex] = false;        
  42.  
  43. }
  44.  
  45. function updateTotalPrice()
  46. {
  47.     var itemBox = document.getElementById('shopping_cart_items');
  48.     // Calculating total price and showing it below the table with basket items
  49.     var totalPrice = 0;
  50.     if(document.getElementById('shopping_cart_totalprice')){
  51.         for(var no=1;no<itemBox.rows.length;no++){
  52.             totalPrice = totalPrice + (itemBox.rows[no].cells[0].innerHTML.replace(/[^0-9]/g) * itemBox.rows[no].cells[2].innerHTML);
  53.  
  54.         }        
  55.         document.getElementById('shopping_cart_totalprice').innerHTML = txt_totalPrice + totalPrice.toFixed(2);
  56.  
  57.     }    
  58.  
  59. }
  60.  
  61. function removeProductFromBasket(productId)
  62. {
  63.     var productRow = document.getElementById('shopping_cart_items_product' + productId);
  64.  
  65.     var numberOfItemCell = productRow.cells[0];
  66.     if(numberOfItemCell.innerHTML == '1'){
  67.         productRow.parentNode.removeChild(productRow);    
  68.     }else{
  69.         numberOfItemCell.innerHTML = numberOfItemCell.innerHTML/1 - 1;
  70.     }
  71.     updateTotalPrice();
  72.     ajaxRemoveProduct(productId);    
  73. }
  74.  
  75. function ajaxValidateRemovedProduct(ajaxIndex)
  76. {
  77.     if(ajaxObjects[ajaxIndex].response!='OK')alert('Error while removing product from the database');
  78.  
  79. }
  80.  
  81. function ajaxRemoveProduct(productId)
  82. {
  83.     var ajaxIndex = ajaxObjects.length;
  84.     ajaxObjects[ajaxIndex] = new sack();
  85.     ajaxObjects[ajaxIndex].requestFile = url_removeProductFromBasket;    // Saving product in this file
  86.     ajaxObjects[ajaxIndex].setVar('productIdToRemove',productId);
  87.     ajaxObjects[ajaxIndex].onCompletion = function(){ ajaxValidateRemovedProduct(ajaxIndex); };    // Specify function that will be executed after file has been found
  88.     ajaxObjects[ajaxIndex].runAJAX();        // Execute AJAX function        
  89. }
  90.  
  91. function ajaxAddProduct(productId)
  92. {
  93.     var ajaxIndex = ajaxObjects.length;
  94.     ajaxObjects[ajaxIndex] = new sack();
  95.     ajaxObjects[ajaxIndex].requestFile = url_addProductToBasket;    // Saving product in this file
  96.     ajaxObjects[ajaxIndex].setVar('productId',productId);
  97.     ajaxObjects[ajaxIndex].onCompletion = function(){ showAjaxBasketContent(ajaxIndex); };    // Specify function that will be executed after file has been found
  98.     ajaxObjects[ajaxIndex].runAJAX();        // Execute AJAX function        
  99. }
  100.  
2.ajax.js

Expand|Select|Wrap|Line Numbers
  1. /* Simple AJAX Code-Kit (SACK) */
  2. /* 2005 Gregory Wild-Smith */
  3. /* www.twilightuniverse.com */
  4. /* Software licenced under a modified X11 licence, see documentation or authors website for more details */
  5.  
  6. function sack(file){
  7.     this.AjaxFailedAlert = "Your browser does not support the enhanced functionality of this website, and therefore you will have an experience that differs from the intended one.\n";
  8.     this.requestFile = file;
  9.     this.method = "POST";
  10.     this.URLString = "";
  11.     this.encodeURIString = true;
  12.     this.execute = false;
  13.  
  14.     this.onLoading = function() { };
  15.     this.onLoaded = function() { };
  16.     this.onInteractive = function() { };
  17.     this.onCompletion = function() { };
  18.  
  19.     this.createAJAX = function() {
  20.         try {
  21.             this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  22.         } catch (e) {
  23.             try {
  24.                 this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  25.             } catch (err) {
  26.                 this.xmlhttp = null;
  27.             }
  28.         }
  29.         if(!this.xmlhttp && typeof XMLHttpRequest != "undefined")
  30.             this.xmlhttp = new XMLHttpRequest();
  31.         if (!this.xmlhttp){
  32.             this.failed = true; 
  33.         }
  34.     };
  35.  
  36.     this.setVar = function(name, value){
  37.         if (this.URLString.length < 3){
  38.             this.URLString = name + "=" + value;
  39.         } else {
  40.             this.URLString += "&" + name + "=" + value;
  41.         }
  42.     }
  43.  
  44.     this.encVar = function(name, value){
  45.         var varString = encodeURIComponent(name) + "=" + encodeURIComponent(value);
  46.     return varString;
  47.     }
  48.  
  49.     this.encodeURLString = function(string){
  50.         varArray = string.split('&');
  51.         for (i = 0; i < varArray.length; i++){
  52.             urlVars = varArray[i].split('=');
  53.             if (urlVars[0].indexOf('amp;') != -1){
  54.                 urlVars[0] = urlVars[0].substring(4);
  55.             }
  56.             varArray[i] = this.encVar(urlVars[0],urlVars[1]);
  57.         }
  58.     return varArray.join('&');
  59.     }
  60.  
  61.     this.runResponse = function(){
  62.         eval(this.response);
  63.     }
  64.  
  65.     this.runAJAX = function(urlstring){
  66.         this.responseStatus = new Array(2);
  67.         if(this.failed && this.AjaxFailedAlert){ 
  68.             alert(this.AjaxFailedAlert); 
  69.         } else {
  70.             if (urlstring){ 
  71.                 if (this.URLString.length){
  72.                     this.URLString = this.URLString + "&" + urlstring; 
  73.                 } else {
  74.                     this.URLString = urlstring; 
  75.                 }
  76.             }
  77.             if (this.encodeURIString){
  78.                 var timeval = new Date().getTime(); 
  79.                 this.URLString = this.encodeURLString(this.URLString);
  80.                 this.setVar("rndval", timeval);
  81.             }
  82.             if (this.element) { this.elementObj = document.getElementById(this.element); }
  83.             if (this.xmlhttp) {
  84.                 var self = this;
  85.                 if (this.method == "GET") {
  86.                     var totalurlstring = this.requestFile + "?" + this.URLString;
  87.                     this.xmlhttp.open(this.method, totalurlstring, true);
  88.                 } else {
  89.                     this.xmlhttp.open(this.method, this.requestFile, true);
  90.                 }
  91.                 if (this.method == "POST"){
  92.                       try {
  93.                         this.xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')  
  94.                     } catch (e) {}
  95.                 }
  96.  
  97.                 this.xmlhttp.send(this.URLString);
  98.                 this.xmlhttp.onreadystatechange = function() {
  99.                     switch (self.xmlhttp.readyState){
  100.                         case 1:
  101.                             self.onLoading();
  102.                         break;
  103.                         case 2:
  104.                             self.onLoaded();
  105.                         break;
  106.                         case 3:
  107.                             self.onInteractive();
  108.                         break;
  109.                         case 4:
  110.                             self.response = self.xmlhttp.responseText;
  111.                             self.responseXML = self.xmlhttp.responseXML;
  112.                             self.responseStatus[0] = self.xmlhttp.status;
  113.                             self.responseStatus[1] = self.xmlhttp.statusText;
  114.                             self.onCompletion();
  115.                             if(self.execute){ self.runResponse(); }
  116.                             if (self.elementObj) {
  117.                                 var elemNodeName = self.elementObj.nodeName;
  118.                                 elemNodeName.toLowerCase();
  119.                                 if (elemNodeName == "input" || elemNodeName == "select" || elemNodeName == "option" || elemNodeName == "textarea"){
  120.                                     self.elementObj.value = self.response;
  121.                                 } else {
  122.                                     self.elementObj.innerHTML = self.response;
  123.                                 }
  124.                             }
  125.                             self.URLString = "";
  126.                         break;
  127.                     }
  128.                 };
  129.             }
  130.         }
  131.     };
  132. this.createAJAX();
  133. }
  134.  
3.fly-to-basket.html

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fly to basket</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
text-align:center;
background-color:#E2EBED;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
}

#mainContainer{
width:860px;
margin:0 auto; /* Center alignment */
text-align:left;
background-color:#FFF;
}
#leftColumn{ /* Left column of the page */
width:600px;
float:left;
padding-right:5px;
}

#rightColumn{ /* right column, i.e. shopping cart column */
width:240px;
float:right;
height:600px;
background-color:#DDD;
padding-right:10px;
}
#shopping_cart{ /* Shopping cart */
margin:3px;
padding:3px;
}
.clear{
clear:both;
}

.product_container{ /* Div for each product */
width:190px;
margin-right:15px;
float:left;
margin-top:3px;
padding:2px;
font-weight:bold;
}

.sliding_product img{ /* Float product images */
float:left;
margin:2px;
}
img{ /* No image borders */
border:0px;
}

</style>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/fly-to-basket.js"></script>
</head>
<body>

<div id="mainContainer">

<div id="leftColumn">
<div id="products">
<!-- DIV FOR A PRODUCT -->
<div class="product_container">
<div id="slidingProduct1" class="sliding_product">
A20001<br>2 FXO analog card<br>21,034.50
</div>
<a href="#" onclick="addToBasket(1);return false;"><img src="images/basket.gif"></a>
<div class="clear"></div>
</div>
<!-- END DIV FOR A PRODUCT -->
<!-- DIV FOR A PRODUCT -->
<div class="product_container">
<div id="slidingProduct2" class="sliding_product">

A20001D<br>2 FXO analog card w/ EC HW<br>38,449.50

</div>
<a href="#" onclick="addToBasket(2);return false"><img src="images/basket.gif"></a>
<div class="clear"></div>
</div>
<!-- END DIV FOR A PRODUCT -->
<!-- DIV FOR A PRODUCT -->
<div class="product_container">
<div id="slidingProduct3" class="sliding_product">
A20002<br>
4 FXO analog card
<br>27,129.75

</div>
<a href="#" onclick="addToBasket(3);return false"><img src="images/basket.gif"></a>
<div class="clear"></div>
</div>
<!-- END DIV FOR A PRODUCT -->
<!-- DIV FOR A PRODUCT -->
<div class="product_container">
<div id="slidingProduct4" class="sliding_product">
A20002D<br>4 FXO analog card w/ EC HW<br>44,544.75

</div>
<a href="#" onclick="addToBasket(4);return false"><img src="images/basket.gif"></a>
<div class="clear"></div>
</div>
<!-- END DIV FOR A PRODUCT -->

<!-- DIV FOR A PRODUCT -->
<div class="product_container">
<div id="slidingProduct5" class="sliding_product">
A20003<br>6 FXO analog card<br>38,391.45

</div>
<a href="#" onclick="addToBasket(5);return false"><img src="images/basket.gif"></a>
<div class="clear"></div>
</div>
<!-- END DIV FOR A PRODUCT -->

<!-- DIV FOR A PRODUCT -->
<div class="product_container">
<div id="slidingProduct6" class="sliding_product">
A20003D<br>6 FXO analog card w/ EC HW<br>55,806.45

</div>
<a href="#" onclick="addToBasket(6);return false"><img src="images/basket.gif"></a>
<div class="clear"></div>
</div>
<!-- END DIV FOR A PRODUCT -->

<!-- DIV FOR A PRODUCT -->
<div class="product_container">
<div id="slidingProduct7" class="sliding_product">
A20004<br>8 FXO analog card<br>44,486.70


</div>
<a href="#" onclick="addToBasket(7);return false"><img src="images/basket.gif"></a>
<div class="clear"></div>
</div>
<!-- END DIV FOR A PRODUCT -->

<!-- DIV FOR A PRODUCT -->
<div class="product_container">
<div id="slidingProduct8" class="sliding_product">
A20004D<br>8 FXO analog card w/ EC HW<br>61,901.70


</div>


<a href="#" onclick="addToBasket(7);return false"><img src="images/basket.gif"></a>
<div class="clear"></div>
</div>
<!-- END DIV FOR A PRODUCT -->

<!-- DIV FOR A PRODUCT -->
<div class="product_container">
<div id="slidingProduct8" class="sliding_product">
A20005<br>10 FXO analog card<br>55,748.40



</div>


<a href="#" onclick="addToBasket(8);return false"><img src="images/basket.gif"></a>
<div class="clear"></div>
</div>
<!-- END DIV FOR A PRODUCT -->
</div>
<div class="clear"></div>
<p style="padding:5px"><b>Click on the "Add to basket" </b></p>
</div>
[/HTML]


[HTML] <div id="rightColumn">
<!-- Shopping cart It's important that the id of this div is "shopping_cart" -->
<div id="shopping_cart">
<strong>Shopping cart</strong>
<table id="shopping_cart_items">
<tr>
<th>Items</th>
<th>Description</th>
<th>Price</th>
<th></th>
</tr>
<!-- Here, you can output existing basket items from your database
One row for each item. The id of the TR tag should be shopping_cart_items_product + productId,
example: shopping_cart_items_product1 for the id 1 -->


</table>

<div id="shopping_cart_totalprice"></div>
</div>
</div>

<div class="clear"></div>

</div>

</body>
</html>
[/HTML]
4.addproduct.php

[PHP]<?

/* Input to this file $_POST['productId']

This file outputs a string in this format

productId|||productDescription|||price,

i.e. ID of product followed by 3 pipes followed by a description of the product followed by 3 pipes followed by the price

*/

/* This is code only for the demo - You would most likely use a database for this */


if(!isset($_POST['productId']))exit; /* No product id sent as input to this file */

switch($_POST['productId']){

case "1";
echo "1|||A20001 2 FXO analog card|||21,034.50";
break;
case "2";
echo "2|||A20001D 2 FXO analog card w/ EC HW|||38,449.50";
break;
case "3";
echo "3|||A20002 4 FXO analog card|||27,129.75";
break;
case "4";
echo "4|||A20002D 4 FXO analog card w/ EC HW|||44,544.75";
break;
case "5";
echo "5|||A20003 6 FXO analog card|||38,391.45";
break;
case "6";
echo "6|||A20003D 6 FXO analog card w/ EC HW|||55,806.45";
break;
case "7";
echo "7|||A20004|||8 FXO analog card|||44,486.70";
break;
case "8";
echo "8|||A20004D 8 FXO analog card w/ EC HW|||61,901.70";
break;

case "9";
echo "9|||A20005 10 FXO analog card|||55,748.40";
break;

case "10";
echo "10|||A20005 10 FXO analog card|||55,748.40";
break;

}


?>[/PHP]
Jan 11 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Please enclose your posted code in [code] tags (See How to Ask a Question).

This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use [code] tags in future.

MODERATOR
Jan 11 '08 #4

P: 15
Hi,

I have a pricelist form in ajax.The user will select the items and the items will be displayed in a div tag. I want to send the contents of this div(dynamic) by email. How could this be done using ajax?


Thanks in advance.

------
Jan 12 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Threads merged. Please do not double post.
Jan 12 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.