sending the pricelist by mail in ajax

[ravisuguna]

Hi,


I am new to ajax.I am doing a pricelist form using ajax.I downloaded a sample code from the net(Dhtmlgoodie s.com-shopping cart programme) and I am modifying it.(url:http://www.dhtmlgoodie s.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

[dmjpro]

Hi,


I am new to ajax.I am doing a pricelist form using ajax.I downloaded a sample code from the net(Dhtmlgoodie s.com-shopping cart programme) and I am modifying it.(url:http://www.dhtmlgoodie s.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

[ravisuguna]

Hi,

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

[CODE=javascript]/*************** *************** *************** *************** *************** *************** *************** ***
(C) www.dhtmlgoodie s.com, March 2006

This is a script from www.dhtmlgoodie s.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Version:
1.0 Released March. 3rd 2006

Thank you!

www.dhtmlgoodie s.com
Alf Magne Kalleland

*************** *************** *************** *************** *************** *************** *************** ***/

var flyingSpeed = 25;
var url_addProductT oBasket = 'addProduct.php ';
var url_removeProdu ctFromBasket = 'removeProduct. php';
var txt_totalPrice = 'Total: ';


var shopping_cart_d iv = false;
var flyingDiv = false;
var currentProductD iv = false;

var shopping_cart_x = false;
var shopping_cart_y = false;

var slide_xFactor = false;
var slide_yFactor = false;

var diffX = false;
var diffY = false;

var currentXPos = false;
var currentYPos = false;

var ajaxObjects = new Array();


function shoppingCart_ge tTopPos(inputOb j)
{
var returnValue = inputObj.offset Top;
while((inputObj = inputObj.offset Parent) != null){
if(inputObj.tag Name!='HTML')re turnValue += inputObj.offset Top;
}
return returnValue;
}

function shoppingCart_ge tLeftPos(inputO bj)
{
var returnValue = inputObj.offset Left;
while((inputObj = inputObj.offset Parent) != null){
if(inputObj.tag Name!='HTML')re turnValue += inputObj.offset Left;
}
return returnValue;
}
[/CODE]

[CODE=javascript]function addToBasket(pro ductId)
{
if(!shopping_ca rt_div)shopping _cart_div = document.getEle mentById('shopp ing_cart');
if(!flyingDiv){
flyingDiv = document.create Element('DIV');
flyingDiv.style .position = 'absolute';
document.body.a ppendChild(flyi ngDiv);
}

shopping_cart_x = shoppingCart_ge tLeftPos(shoppi ng_cart_div);
shopping_cart_y = shoppingCart_ge tTopPos(shoppin g_cart_div);

currentProductD iv = document.getEle mentById('slidi ngProduct' + productId);

currentXPos = shoppingCart_ge tLeftPos(curren tProductDiv);
currentYPos = shoppingCart_ge tTopPos(current ProductDiv);

diffX = shopping_cart_x - currentXPos;
diffY = shopping_cart_y - currentYPos;



var shoppingContent Copy = currentProductD iv.cloneNode(tr ue);
shoppingContent Copy.id='';
flyingDiv.inner HTML = '';
flyingDiv.style .left = currentXPos + 'px';
flyingDiv.style .top = currentYPos + 'px';
flyingDiv.appen dChild(shopping ContentCopy);
flyingDiv.style .display='block ';
flyingDiv.style .width = currentProductD iv.offsetWidth + 'px';
flyToBasket(pro ductId);

}


function flyToBasket(pro ductId)
{
var maxDiff = Math.max(Math.a bs(diffX),Math. abs(diffY));
var moveX = (diffX / maxDiff) * flyingSpeed;;
var moveY = (diffY / maxDiff) * flyingSpeed;

currentXPos = currentXPos + moveX;
currentYPos = currentYPos + moveY;

flyingDiv.style .left = Math.round(curr entXPos) + 'px';
flyingDiv.style .top = Math.round(curr entYPos) + 'px';


if(moveX>0 && currentXPos > shopping_cart_x ){
flyingDiv.style .display='none' ;
}
if(moveX<0 && currentXPos < shopping_cart_x ){
flyingDiv.style .display='none' ;
}

if(flyingDiv.st yle.display=='b lock')setTimeou t('flyToBasket( "' + productId + '")',10); else ajaxAddProduct( productId);
}
[/CODE]
[CODE=javascript]function showAjaxBasketC ontent(ajaxInde x)
{
// Getting a reference to the shopping cart items table
var itemBox = document.getEle mentById('shopp ing_cart_items' );

var productItems = ajaxObjects[ajaxIndex].response.split ('|||'); // Breaking response from Ajax into tokens

if(document.get ElementById('sh opping_cart_ite ms_product' + productItems[0])){ // A product with this id is allready in the basket - just add number items
var row = document.getEle mentById('shopp ing_cart_items_ product' + productItems[0]);
var items = row.cells[0].innerHTML /1;
items = items + 1;
row.cells[0].innerHTML = items;
}else{ // Product isn't allready in the basket - add a new row
var tr = itemBox.insertR ow(-1);
tr.id = 'shopping_cart_ items_product' + productItems[0]

var td = tr.insertCell(-1);
td.innerHTML = '1'; // Number of items

var td = tr.insertCell(-1);
td.innerHTML = productItems[1]; // Description

var td = tr.insertCell(-1);
td.style.textAl ign = 'right';
td.innerHTML = productItems[2]; // Price

var td = tr.insertCell(-1);
var a = document.create Element('A');
td.appendChild( a);
a.href = '#';
a.onclick = function(){ removeProductFr omBasket(produc tItems[0]); };
var img = document.create Element('IMG');
img.src = 'images/remove.gif';
a.appendChild(i mg);
//td.innerHTML = '<a href="#" onclick="remove ProductFromBask et("' + productItems[0] + '");return false;"><img src="images/remove.gif"></a>';
}


updateTotalPric e();

ajaxObjects[ajaxIndex] = false;

}

function updateTotalPric e()
{
var itemBox = document.getEle mentById('shopp ing_cart_items' );
// Calculating total price and showing it below the table with basket items
var totalPrice = 0;
if(document.get ElementById('sh opping_cart_tot alprice')){
for(var no=1;no<itemBox .rows.length;no ++){
totalPrice = totalPrice + (itemBox.rows[no].cells[0].innerHTML.repl ace(/[^0-9]/g) * itemBox.rows[no].cells[2].innerHTML);

}
document.getEle mentById('shopp ing_cart_totalp rice').innerHTM L = txt_totalPrice + totalPrice.toFi xed(2);

}

}

function removeProductFr omBasket(produc tId)
{
var productRow = document.getEle mentById('shopp ing_cart_items_ product' + productId);

var numberOfItemCel l = productRow.cell s[0];
if(numberOfItem Cell.innerHTML == '1'){
productRow.pare ntNode.removeCh ild(productRow) ;
}else{
numberOfItemCel l.innerHTML = numberOfItemCel l.innerHTML/1 - 1;
}
updateTotalPric e();
ajaxRemoveProdu ct(productId);
}

function ajaxValidateRem ovedProduct(aja xIndex)
{
if(ajaxObjects[ajaxIndex].response!='OK' )alert('Error while removing product from the database');

}

function ajaxRemoveProdu ct(productId)
{
var ajaxIndex = ajaxObjects.len gth;
ajaxObjects[ajaxIndex] = new sack();
ajaxObjects[ajaxIndex].requestFile = url_removeProdu ctFromBasket; // Saving product in this file
ajaxObjects[ajaxIndex].setVar('produc tIdToRemove',pr oductId);
ajaxObjects[ajaxIndex].onCompletion = function(){ ajaxValidateRem ovedProduct(aja xIndex); }; // Specify function that will be executed after file has been found
ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function
}

function ajaxAddProduct( productId)
{
var ajaxIndex = ajaxObjects.len gth;
ajaxObjects[ajaxIndex] = new sack();
ajaxObjects[ajaxIndex].requestFile = url_addProductT oBasket; // Saving product in this file
ajaxObjects[ajaxIndex].setVar('produc tId',productId) ;
ajaxObjects[ajaxIndex].onCompletion = function(){ showAjaxBasketC ontent(ajaxInde x); }; // Specify function that will be executed after file has been found
ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function
}
[/CODE]
2.ajax.js

[CODE=javascript]/* Simple AJAX Code-Kit (SACK) */
/* ©2005 Gregory Wild-Smith */
/* www.twilightuni verse.com */
/* Software licenced under a modified X11 licence, see documentation or authors website for more details */

function sack(file){
this.AjaxFailed Alert = "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";
this.requestFil e = file;
this.method = "POST";
this.URLString = "";
this.encodeURIS tring = true;
this.execute = false;

this.onLoading = function() { };
this.onLoaded = function() { };
this.onInteract ive = function() { };
this.onCompleti on = function() { };

this.createAJAX = function() {
try {
this.xmlhttp = new ActiveXObject(" Msxml2.XMLHTTP" );
} catch (e) {
try {
this.xmlhttp = new ActiveXObject(" Microsoft.XMLHT TP");
} catch (err) {
this.xmlhttp = null;
}
}
if(!this.xmlhtt p && typeof XMLHttpRequest != "undefined" )
this.xmlhttp = new XMLHttpRequest( );
if (!this.xmlhttp) {
this.failed = true;
}
};

this.setVar = function(name, value){
if (this.URLString .length < 3){
this.URLString = name + "=" + value;
} else {
this.URLString += "&" + name + "=" + value;
}
}

this.encVar = function(name, value){
var varString = encodeURICompon ent(name) + "=" + encodeURICompon ent(value);
return varString;
}

this.encodeURLS tring = function(string ){
varArray = string.split('& ');
for (i = 0; i < varArray.length ; i++){
urlVars = varArray[i].split('=');
if (urlVars[0].indexOf('amp;' ) != -1){
urlVars[0] = urlVars[0].substring(4);
}
varArray[i] = this.encVar(url Vars[0],urlVars[1]);
}
return varArray.join(' &');
}

this.runRespons e = function(){
eval(this.respo nse);
}

this.runAJAX = function(urlstr ing){
this.responseSt atus = new Array(2);
if(this.failed && this.AjaxFailed Alert){
alert(this.Ajax FailedAlert);
} else {
if (urlstring){
if (this.URLString .length){
this.URLString = this.URLString + "&" + urlstring;
} else {
this.URLString = urlstring;
}
}
if (this.encodeURI String){
var timeval = new Date().getTime( );
this.URLString = this.encodeURLS tring(this.URLS tring);
this.setVar("rn dval", timeval);
}
if (this.element) { this.elementObj = document.getEle mentById(this.e lement); }
if (this.xmlhttp) {
var self = this;
if (this.method == "GET") {
var totalurlstring = this.requestFil e + "?" + this.URLString;
this.xmlhttp.op en(this.method, totalurlstring, true);
} else {
this.xmlhttp.op en(this.method, this.requestFil e, true);
}
if (this.method == "POST"){
try {
this.xmlhttp.se tRequestHeader( 'Content-Type','applicat ion/x-www-form-urlencoded')
} catch (e) {}
}

this.xmlhttp.se nd(this.URLStri ng);
this.xmlhttp.on readystatechang e = function() {
switch (self.xmlhttp.r eadyState){
case 1:
self.onLoading( );
break;
case 2:
self.onLoaded() ;
break;
case 3:
self.onInteract ive();
break;
case 4:
self.response = self.xmlhttp.re sponseText;
self.responseXM L = self.xmlhttp.re sponseXML;
self.responseSt atus[0] = self.xmlhttp.st atus;
self.responseSt atus[1] = self.xmlhttp.st atusText;
self.onCompleti on();
if(self.execute ){ self.runRespons e(); }
if (self.elementOb j) {
var elemNodeName = self.elementObj .nodeName;
elemNodeName.to LowerCase();
if (elemNodeName == "input" || elemNodeName == "select" || elemNodeName == "option" || elemNodeName == "textarea") {
self.elementObj .value = self.response;
} else {
self.elementObj .innerHTML = self.response;
}
}
self.URLString = "";
break;
}
};
}
}
};
this.createAJAX ();
}
[/CODE]
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_contai ner{ /* Div for each product */
width:190px;
margin-right:15px;
float:left;
margin-top:3px;
padding:2px;
font-weight:bold;
}

.sliding_produc t 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="mainContain er">

<div id="leftColumn" >
<div id="products">
<!-- DIV FOR A PRODUCT -->
<div class="product_ container">
<div id="slidingProd uct1" class="sliding_ product">
A20001<br>2 FXO analog card<br>21,034. 50
</div>
<a href="#" onclick="addToB asket(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="slidingProd uct2" class="sliding_ product">

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

</div>
<a href="#" onclick="addToB asket(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="slidingProd uct3" class="sliding_ product">
A20002<br>
4 FXO analog card
<br>27,129.75

</div>
<a href="#" onclick="addToB asket(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="slidingProd uct4" class="sliding_ product">
A20002D<br>4 FXO analog card w/ EC HW<br>44,544.75

</div>
<a href="#" onclick="addToB asket(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="slidingProd uct5" class="sliding_ product">
A20003<br>6 FXO analog card<br>38,391. 45

</div>
<a href="#" onclick="addToB asket(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="slidingProd uct6" class="sliding_ product">
A20003D<br>6 FXO analog card w/ EC HW<br>55,806.45

</div>
<a href="#" onclick="addToB asket(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="slidingProd uct7" class="sliding_ product">
A20004<br>8 FXO analog card<br>44,486. 70


</div>
<a href="#" onclick="addToB asket(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="slidingProd uct8" class="sliding_ product">
A20004D<br>8 FXO analog card w/ EC HW<br>61,901.70


</div>


<a href="#" onclick="addToB asket(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="slidingProd uct8" class="sliding_ product">
A20005<br>10 FXO analog card<br>55,748. 40



</div>


<a href="#" onclick="addToB asket(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_c art" -->
<div id="shopping_ca rt">
<strong>Shoppin g cart</strong>
<table id="shopping_ca rt_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_i tems_product + productId,
example: shopping_cart_i tems_product1 for the id 1 -->


</table>

<div id="shopping_ca rt_totalprice"> </div>
</div>
</div>

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

</div>

</body>
</html>
[/HTML]
4.addproduct.ph p

[PHP]<?

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

This file outputs a string in this format

productId|||pro ductDescription |||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($_POS T['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.5 0";
break;
case "2";
echo "2|||A20001 D 2 FXO analog card w/ EC HW|||38,449.50" ;
break;
case "3";
echo "3|||A20002 4 FXO analog card|||27,129.7 5";
break;
case "4";
echo "4|||A20002 D 4 FXO analog card w/ EC HW|||44,544.75" ;
break;
case "5";
echo "5|||A20003 6 FXO analog card|||38,391.4 5";
break;
case "6";
echo "6|||A20003 D 6 FXO analog card w/ EC HW|||55,806.45" ;
break;
case "7";
echo "7|||A20004 |||8 FXO analog card|||44,486.7 0";
break;
case "8";
echo "8|||A20004 D 8 FXO analog card w/ EC HW|||61,901.70" ;
break;

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

case "10";
echo "10|||A2000 5 10 FXO analog card|||55,748.4 0";
break;

}


?>[/PHP]

[acoder]

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

[ravisuguna]

sending the contents of a div by mail

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.

------

[acoder]

Threads merged. Please do not double post.