Monday, 9 May 2011

quickquote_ajax.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<title>Untitled Document</title>
</head>

<body>
    <form name="frmQuote" action="" method="post">
    <input type="hidden" name="txtTotal" id="txtTotal" value="2" />
    <table width="100%">
        <tr>           
            <td colspan="3" width="64%">&nbsp;</td>
            <td width="10%" align="center">&nbsp;</td>
            <td width="10%"><strong>PRICE</strong></td>
            <td width="10%" align="center">&nbsp;</td>
            <td width="6%">&nbsp;</td>
        </tr>
        <tr>           
            <td colspan="3"  width="64%">&nbsp;</td>
            <td width="10%"><strong>Type1</strong></td>
            <td width="10%"><strong>Type2</strong></td>
            <td width="10%"><strong>Type3</strong></td>
            <td width="6%">&nbsp;</td>
        </tr>
        <tr>
            <td width="20%">Width (cm)&nbsp;<input type="text" name="txtwidth1" id="txtwidth1" onblur="javascript:calculateQuickQuote('1');"/></td>
            <td width="20%">Height (cm)&nbsp;<input type="text" name="txtheight1" id="txtheight1" onblur="javascript:calculateQuickQuote('1');"/></td>
            <td width="24%">Number or blinds&nbsp;<input type="text" name="txtnoblinds1" id="txtnoblinds1" onblur="javascript:calculateQuickQuote('1');"/></td>
            <td width="10%"><span id="type11"></span><input type="hidden" name="txttype11" id="txttype11" value="" /></td>
            <td width="10%"><span id="type12"></span><input type="hidden" name="txttype12" id="txttype12" value="" /></td>
            <td width="10%"><span id="type13"></span><input type="hidden" name="txttype13" id="txttype13" value="" /></td>
            <td width="6%">&nbsp;</td>
        </tr>
        <tr>
            <td width="20%">Width (cm)&nbsp;<input type="text" name="txtwidth2" id="txtwidth2" onblur="javascript:calculateQuickQuote('2');"/></td>
            <td width="20%">Height (cm)&nbsp;<input type="text" name="txtheight2" id="txtheight2" onblur="javascript:calculateQuickQuote('2');"/></td>
            <td width="24%">Number or blinds&nbsp;<input type="text" name="txtnoblinds2" id="txtnoblinds2" onblur="javascript:calculateQuickQuote('2');"/></td>
            <td width="10%"><span id="type21"></span><input type="hidden" name="txttype21" id="txttype21" value="" /></td>
            <td width="10%"><span id="type22"></span><input type="hidden" name="txttype22" id="txttype22" value="" /></td>
            <td width="10%"><span id="type23"></span><input type="hidden" name="txttype23" id="txttype23" value="" /></td>
            <td width="6%">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="6">
            <div id="addExtraFields"></div>
            </td>
        </tr>
        <tr>
            <td colspan="6" align="left">
                <input type="button" name="btnaddsize" value="Add different size" onclick="javascript:return addSize();"/>
            </td>
        </tr>
        <tr>           
            <td colspan="3"  width="60%" align="right"><strong>Total: &nbsp;</strong></td>
            <td width="10%"><span id="total1"></span></td>
            <td width="10%"><span id="total2"></span></td>
            <td width="10%"><span id="total3"></span></td>
            <td width="10%">&nbsp;</td>
        </tr>
    </table>
    </form>
   
<script type="text/javascript">
function calculateQuickQuote(num)
{
    var width = 1;
    var height = 1;
    var noblinds = 1;
    if(isNaN(eval("document.getElementById('txtwidth"+num+"').value")) && eval("document.getElementById('txtwidth"+num+"').value!=''"))
    {
        alert("Invalid value!");
        eval("document.getElementById('txtwidth"+num+"').value=''");               
        return false;
    }
    if(isNaN(eval("document.getElementById('txtheight"+num+"').value")) && eval("document.getElementById('txtheight"+num+"').value!=''"))
    {
        alert("Invalid value!");
        eval("document.getElementById('txtheight"+num+"').value=''");
        return false;
    }
    if(isNaN(eval("document.getElementById('txtnoblinds"+num+"').value")) && eval("document.getElementById('txtnoblinds"+num+"').value!=''"))
    {
        alert("Invalid value!");
        eval("document.getElementById('txtnoblinds"+num+"').value=''");
        return false;
    }   
    if(eval("document.getElementById('txtwidth"+num+"').value!=''"))
    {
        width = eval("document.getElementById('txtwidth"+num+"').value");
    }
    if(eval("document.getElementById('txtheight"+num+"').value!=''"))
    {
        height = eval("document.getElementById('txtheight"+num+"').value");
    }
    if(eval("document.getElementById('txtnoblinds"+num+"').value!=''"))
    {
        noblinds = eval("document.getElementById('txtnoblinds"+num+"').value");
    }
   
   
    if(eval("document.getElementById('txtnoblinds"+num+"').value!=''") && eval("document.getElementById('txtheight"+num+"').value!=''") && eval("document.getElementById('txtwidth"+num+"').value!=''"))
    {
    url = "quickquote_calculation.php?width="+width+"&height="+height+"&noblinds="+noblinds;
   
    var response = $.ajax({ type: "GET",  
                        url: url,  
                        async: false,
                        success : function(calculation)
                        {
                            eval("document.getElementById('type"+num+"1').innerHTML="+calculation+"");
                            eval("document.getElementById('txttype"+num+"1').value="+calculation+"");
                            eval("document.getElementById('type"+num+"2').innerHTML="+calculation*2+"");
                            eval("document.getElementById('txttype"+num+"2').value="+calculation*2+"");
                            eval("document.getElementById('type"+num+"3').innerHTML="+calculation*3+"");
                            eval("document.getElementById('txttype"+num+"3').value="+calculation*3+"");
                        }
                      });
   
    var total = document.getElementById('txtTotal').value;
   
    var totWidth = 0;
    var totHeight = 0;
    var totNoBlinds = 0;
    for(var i=1;i<=total;i++)
    {
        if(eval("document.getElementById('txttype"+i+"1').value")!="")
        {
            totWidth+=parseInt(eval("document.getElementById('txttype"+i+"1').value")) ;
        }
        if(eval("document.getElementById('txttype"+i+"2').value")!="")
        {
            totHeight+=parseInt(eval("document.getElementById('txttype"+i+"2').value")) ;
        }
        if(eval("document.getElementById('txttype"+i+"3').value")!="")
        {
            totNoBlinds+=parseInt(eval("document.getElementById('txttype"+i+"3').value")) ;
        }
    }
    document.getElementById('total1').innerHTML = "$"+totWidth;
    document.getElementById('total2').innerHTML = "$"+totHeight;
    document.getElementById('total3').innerHTML = "$"+totNoBlinds;
    }
}

function addSize()
{
    var total = parseInt(document.getElementById('txtTotal').value)+1;
    document.getElementById('txtTotal').value = total;
   
    dv = document.createElement('div');
    dv.setAttribute('id',"div"+total);
   
    dv.innerHTML='<table width="100%"><tr><td width="20%">Width (cm)&nbsp;<input type="text" name="txtwidth'+total+'"+ id="txtwidth'+total+'" onblur="javascript:calculateQuickQuote('+total+');"/></td><td width="20%">Height (cm)&nbsp;<input type="text" name="txtheight'+total+'" id="txtheight'+total+'" onblur="javascript:calculateQuickQuote('+total+');"/></td><td width="22%">Number or blinds&nbsp;<input type="text" name="txtnoblinds'+total+'" id="txtnoblinds'+total+'" onblur="javascript:calculateQuickQuote('+total+');"/></td><td width="10%" style="padding-left:27px;"><span id="type'+total+'1"></span><input type="hidden" name="txttype'+total+'1" id="txttype'+total+'1" value="" /></td><td width="10%" style="padding-left:27px;"><span id="type'+total+'2"></span><input type="hidden" name="txttype'+total+'2" id="txttype'+total+'2" value="" /></td><td width="10%" style="padding-left:27px;"><span id="type'+total+'3"></span><input type="hidden" name="txttype'+total+'3" id="txttype'+total+'3" value="" /></td><td width="2%"><img src="delete_icon.png" onclick="javascript:deleteElement(\''+total+'\');" /></td></tr></table>';
   
    // attach event onmouseclick to the created div tag

    //finally add the div id to ur form
    //document.frmQuote.addExtraFields.appendChild(dv);
    document.getElementById('addExtraFields').appendChild(dv);
   
}

function deleteElement(id)
{
    eval("document.getElementById('txttype"+id+"1').value=0");
    eval("document.getElementById('txttype"+id+"2').value=0");
    eval("document.getElementById('txttype"+id+"3').value=0");
    document.getElementById('div'+id).style.display='none';
    setValues();
}

function setValues()
{
    var total = document.getElementById('txtTotal').value;
   
    var totWidth = 0;
    var totHeight = 0;
    var totNoBlinds = 0;
    for(var i=1;i<=total;i++)
    {
        if(eval("document.getElementById('txttype"+i+"1').value")!="")
        {
            totWidth+=parseInt(eval("document.getElementById('txttype"+i+"1').value")) ;
        }
        if(eval("document.getElementById('txttype"+i+"2').value")!="")
        {
            totHeight+=parseInt(eval("document.getElementById('txttype"+i+"2').value")) ;
        }
        if(eval("document.getElementById('txttype"+i+"3').value")!="")
        {
            totNoBlinds+=parseInt(eval("document.getElementById('txttype"+i+"3').value")) ;
        }
    }
    document.getElementById('total1').innerHTML = "$"+totWidth;
    document.getElementById('total2').innerHTML = "$"+totHeight;
    document.getElementById('total3').innerHTML = "$"+totNoBlinds;
}
</script>
</body>
</html>
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)