Ajax Pop-Up

**Dormilich** · Jan 7 '09, 11:45 AM

If you can show us the code, we can maybe spot the problem.

regards

**divyac** · Jan 8 '09, 04:04 AM

The code is bit bigger...
Still i have to work on some functionalities and that too only after submitting.Now my sole aim is to submit...Here is the code for returns.php

Code:

<?php
include "includes/user.php";

if(isset($_GET['customerID'])&& $_GET['customerID']!='' && isset($_GET['productID'])&& $_GET['productID']!='' )
{
$totalUser=mysql_num_rows(mysql_query("SELECT Customers.customerID, Products.productID FROM pri_master_sales_rental SaleAndRental, pri_master_products Products, pri_master_customers Customers WHERE SaleAndRental.customerID=Customers.customerID AND SaleAndRental.productID=Products.productID HAVING customerID='$_GET[customerID]' AND productID ='$_GET[productID]' "));

$query="SELECT Customers.Name, Customers.customerID, Products.productID, Products.productName, SaleAndRental.rentalPrice, SaleAndRental.rentedDate, SaleAndRental.dueDate, SaleAndRental.lateCharges FROM pri_master_sales_rental SaleAndRental, pri_master_products Products, pri_master_customers Customers WHERE SaleAndRental.customerID=Customers.customerID AND SaleAndRental.productID=Products.productID HAVING customerID='$_GET[customerID]' ORDER BY SaleAndRental.rentedDate DESC LIMIT $set_limit, $limit";

$result=mysql_query($query);
$count=mysql_num_rows($result);
}

if(isset($_GET['sendCR']))
{
$productUpdate=mysql_query("update pri_master_products set stockInHand=stockInHand+1 where productID ='$_GET[productID]'");
$customerUpdate=mysql_query("update pri_master_customers set totalAmount=totalAmount+'$_GET[lateCharges]',
                                                               amountPaid=amountPaid+'$_GET[amountPaid]', 
                                                               balanceAmount='$_GET[balanceAmount]' where customerID='$_GET[customerID]'") or die("Query failed : " . mysql_error());
        //header('location:returns.php?success=1');                                   
}


if(isset($_GET['sendCS']))
{
$tempInsert=mysql_query("insert into pri_temp_returns(productID)VALUES('$_GET[productID]')");
$productUpdate=mysql_query("update pri_master_products set stockInHand=stockInHand-1,stockInStores=stockInStores-1 where productID ='$_GET[productID]'");
$customerUpdate=mysql_query("update pri_master_customers set totalAmount=totalAmount+'$_GET[convCharges]',
                                                             amountPaid=amountPaid+'$_GET[amountPaid]', 
                                                             balanceAmount='$_GET[balanceAmount]' where customerID='$_GET[customerID]'") or die("Query failed : " . mysql_error());
        //header('location:returns.php?success=2');                                   
}

if(isset($_GET['sendMoreCR']))
{
$insert=mysql_query("INSERT INTO pri_temp_returns(productID)VALUES('$_GET[productID]')");
$productUpdate=mysql_query("update pri_master_products set stockInHand=stockInHand+1 where productID ='$_GET[productID]'");
$customerUpdate=mysql_query("update pri_master_customers set totalAmount=totalAmount+'$_GET[lateCharges]',
                                                               amountPaid=amountPaid+'$_GET[amountPaid]', 
                                                               balanceAmount='$_GET[balanceAmount]' where customerID='$_GET[customerID]'") or die("Query failed : " . mysql_error());
}

if(isset($_GET['sendMoreCS']))
{
$insert=mysql_query("INSERT INTO pri_temp_returns(productID)VALUES('$_GET[productID]')");
$productUpdate=mysql_query("update pri_master_products set stockInHand=stockInHand-1,
                                                           stockInStores=stockInStores-1 where productID ='$_GET[productID]'");
$customerUpdate=mysql_query("update pri_master_customers set totalAmount=totalAmount+'$_GET[convCharges]',
                                                             amountPaid=amountPaid+'$_GET[amountPaid]', 
                                                             balanceAmount='$_GET[balanceAmount]' where customerID='$_GET[customerID]'") or die("Query failed : " . mysql_error());
}

?>
<!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=utf-8" />
<title>SALES AND RENTALS MANAGEMENT SYSTEM</title>
<link rel="stylesheet" href="styled.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="javascripts/popup.js"></script>

</head>
<body onload="javascript:document.getElementById('customerID').focus();">
    <div>
    <div>
        <? include_once "includes/header.php" ?>
        <? include_once "includes/menu.php" ?>
    </div>
    <div class="container">
    <div><h2>Home</h2></div>
<div style="min-height:400px;">

<h3 style="margin: 0px 50px 25px 50px; border-bottom: #999999 2px solid">Returns</h3><a href="home.php"><h5 align="right" style="margin-right:50px;">Back to Home</h5></a>
<div align="center" style="font-size:12px; color:#FF0000;"><strong>
<?
if($_GET['success']==1)
{echo 'Product Returned successfully';}
if($_GET['success']==2)
{echo 'Converted to sales successfully';}

?>
</strong>
</div><div style="padding-left:250px">

<div class='divStyle'>
<div class='divLabel'><label class='text'>Customer ID</label></div>
<div><input type='text' onkeyup="keyPress(this.value,event)" name="customerID" id="customerID" value="<?=isset($_GET['customerID'])&& $_GET['customerID']!=''? $_GET['customerID'] :''?>"/></div>

</div>
</div>
<div style="padding-left:250px">
<div id="placeHolder" class="text"></div></div>
<div style="display:none; width:440px;" id="popupForm"></div>

<div id="product"></div>

<div id="productDetails"></div>
      <br />
        <div align="center">
           <input type="button" name="history" id="history" value="Customer History" onclick="getHistory();"/>
           <input type="button" name="details" id="details" value="Customer Details" onclick="getDetails();"/>
           <input type="button" name="Reset" id="Reset" value="Reset" onclick="javascript:window.location='returns.php'"/>
        <input type="submit" name="view" id="view" value="View Last Transaction" onclick="viewTrans();formSubmit('salesRentals')"/>
</div>

        </div>
      </div>
      </div>
    </div>
    </div>
 <div align="right" style="padding:10px 16px 0px 0px; font-size:12px; font-weight:bold;"></div>
</body>
</html>

and the one below is popup.js

Code:

var xmlHttp
var globalString
var returnPopup=0
var x=0
var y=0

function showUser(str)
{ 

customerxmlHttp=GetXmlHttpObject()
if (customerxmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="product.php?customerID="+str+"&custid="+Math.random()
customerxmlHttp.onreadystatechange=stateChanged
customerxmlHttp.open("GET",url,true)
customerxmlHttp.send(null)

}

function stateChanged() 
{ 
if (customerxmlHttp.readyState==4 || customerxmlHttp.readyState=="complete")
 { 
     //document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
     var placeHolder=document.getElementById("placeHolder");
     //alert(xmlHttp.responseText)
     if(customerxmlHttp.responseText==1)
     {
            placeHolder.innerHTML='<div class="divStyle" id="product"><div class="divLabel"><label class="text">Product ID</label></div><div><input type="text" name="productID" id="productID" onKeyup="productPress(\'popupForm\',event)" onblur="returnForm(\'popupForm\')"></div></div>';
            document.getElementById('productID').focus();
            var rate=document.getElementById("salesPrice").value
            var val=document.getElementById("rentalPrice").value
            document.getElementById("balanceAmount").value=rate-val

     }else{
         placeHolder.innerHTML=''
         document.getElementById('customerID').value=''
         document.getElementById('customerID').focus(); 
         alert('Invalid customer')
     }
  }
}

function returnForm(elementId)
{
    var customerId=document.getElementById('customerID').value
    var productID=document.getElementById('productID').value
    var popup=document.getElementById('popupForm')
        popxmlHttp=GetXmlHttpObject()
            if (popxmlHttp==null)
             {
             alert ("Browser does not support HTTP Request")
             return
             }
    
    if(popup.style.display=='none')
    {
        
        var url="returnsDetails.php?customerID="+customerId+"&productID="+productID+"&cid="+Math.random()
        //call the ajax function
        popxmlHttp.onreadystatechange=popUpControl
        popxmlHttp.open("GET",url,true)
        popxmlHttp.send(null)
    }
}
function popUpControl(){
    var control=document.getElementById("popupForm")
    if (popxmlHttp.readyState==4 || popxmlHttp.readyState=="complete"){ 
    if(popxmlHttp.responseText!=0){
        control.style.display='block';
        control.innerHTML=popxmlHttp.responseText
            var rate=document.getElementById("salesPrice").value
            var val=document.getElementById("rentalPrice").value
            document.getElementById("convCharges").value=rate-val
            var num = new Number(document.getElementById('convCharges').value);
            document.getElementById('convCharges').value=num.toFixed(2);

    }
    else
    {
        var placeHolder=document.getElementById("placeHolder");
        placeHolder.innerHTML='<div class="divStyle" id="product"><div class="divLabel"><label class="text">Product ID</label></div><div><input type="text" name="productID" id="productID" onKeyup="productPress(\'popupForm\',event)" onblur="returnForm(\'popupForm\')">&nbsp;&nbsp;<font color="#FF0000">This Product is not for Rentals</font></div></div>';
        document.getElementById('productID').focus(); 
        
    }
    
    }
    ajaxPopup(control)
}

function ajaxPopup(htmlElement){
    htmlElement.style.zIndex="100";
    htmlElement.style.position="absolute";
    htmlElement.style.width="450px";
    htmlElement.style.margin='0px 0px 0px 0px';
    htmlElement.style.backgroundColor="#FFFFFF";
    htmlElement.style.borderColor="#000000";
    htmlElement.style.left=((window.screen.width/2)-250)+'px';
    //htmlElement.style.top=((window.screen.height/2)-80)+'px';
    htmlElement.style.top='330px';
}

function keyPress(str,e){
    var keycode = e.keyCode || window.event.keyCode;
    if(keycode == 13){
        showUser(str)
    }
}

function productPress(str,e){
    var keycode = e.keyCode || window.event.keyCode;
    if(keycode == 13){
        returnForm(str)
    }
}


function afterpopup(popupElement)
{
  var con=document.getElementById(popupElement);
  con.style.zIndex="50";
  con.innerHTML="";
  con.style.display='none';

}

/*function to get the details of the customer*/
function getDetails(){
    var customerId=document.getElementById('customerID').value
    //create ajax object
    getDetailxmlHttp=GetXmlHttpObject()
            if (getDetailxmlHttp==null)
             {
             alert ("Browser does not support HTTP Request")
             return
             }
    
        var url="customerDetails.php?customerID="+customerId+"&cid="+Math.random()
        //call the ajax function
        getDetailxmlHttp.onreadystatechange=getCustomerDetails
        getDetailxmlHttp.open("GET",url,true)
        getDetailxmlHttp.send(null)

}

function getCustomerDetails(){
             var place=document.getElementById("productDetails");
            
    if (getDetailxmlHttp.readyState==4 || getDetailxmlHttp.readyState=="complete"){ 
            place.innerHTML=getDetailxmlHttp.responseText
      }
}

//end of the function

/* function to get the history of the customer*/
function getHistory(){    
    var customerId=document.getElementById('customerID').value
    //create ajax object
    getHistoryxmlHttp=GetXmlHttpObject()
            if (getHistoryxmlHttp==null)
             {
             alert ("Browser does not support HTTP Request")
             return
             }
    
        var url="customerHistory.php?customerID="+customerId+"&cid="+Math.random()
        //call the ajax function
        getHistoryxmlHttp.onreadystatechange=getCustomerHistory
        getHistoryxmlHttp.open("GET",url,true)
        getHistoryxmlHttp.send(null)
}

function getCustomerHistory(){
             var placeHolder=document.getElementById("productDetails");
            
    if (getHistoryxmlHttp.readyState==4 || getHistoryxmlHttp.readyState=="complete"){ 
            placeHolder.innerHTML=getHistoryxmlHttp.responseText
      }
}
//end of the function



function lateBalance(){

if(x==0){
 var latefees=document.getElementById("lateCharges").value
 var balanceamount=document.getElementById("balanceAmount").value
 document.getElementById("balanceAmount").value=parseFloat(latefees)+parseFloat(balanceamount)
x++;
}
}

function returnBalance(){

if(y==0){

 var conversioncharges=document.getElementById("convCharges").value
 var balanceamount=document.getElementById("balanceAmount").value
     document.getElementById("balanceAmount").value=parseFloat(conversioncharges)+parseFloat(balanceamount)
    y++
}
}

/*function caldueAmount(val){
 var rPrice=document.getElementById("rentalPrice").value
  var rprice=document.getElementById('rentalPrice').value
 var sprice=document.getElementById('salesPrice').value
 var latefees=document.getElementById("lateCharges").value
 var conversioncharges=document.getElementById("convCharges").value
 var balanceamount=document.getElementById("balanceAmount").value
 
 if(conversioncharges==sprice){
     document.getElementById("balanceAmount").value=(parseFloat(balanceamount) + parseFloat(sprice))-rprice
    //alert "parseInt(balanceamount) + parseInt(sprice)-rprice"
 }
 else if(conversioncharges==latefees){
     document.getElementById("balanceAmount").value=parseFloat(balanceamount) + parseFloat(latefees)
 }
 else{
     document.getElementById("balanceAmount").value=balanceamount
 }
}
*/
function discountAmount(val){
    var rate=document.getElementById("balanceAmount").value
    document.getElementById("balanceAmount").value=rate-val
}

function paymentAmount(val){
    var balanceamount=document.getElementById("balanceAmount").value
    document.getElementById("newBalance").value=balanceamount-val
    var num = document.getElementById('newBalance').value;
    document.getElementById('newBalance').value=num.toFixed(2);
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
     // Firefox, Opera 8.0+, Safari
     xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}// JavaScript Document// JavaScript Document// JavaScript Document

and the other one is returnDetails.p hp and this is the file where the submit buttons are present..

Code:

<?
include_once('includes/connection.php');

if(isset($_GET['customerID'])&&($_GET['customerID']!='') && isset($_GET['productID'])&&($_GET['productID']!='')) {

$select=mysql_query("select (DATEDIFF(curdate(),salesrental.dueDate)* products.lateFees) as lateCharges,products.lateFees from pri_master_sales_rental salesrental,pri_master_products products where products.productID=salesrental.productID and products.productID='$_GET[productID]' and salesrental.customerID='$_GET[customerID]'");
$selectResultset=mysql_fetch_array($select);

$result=mysql_query("SELECT Customers.firstName, Customers.customerID, Products.productID, Products.productName, SaleAndRental.rentalPrice, DATE_FORMAT(SaleAndRental.rentedDate, '%m-%d-%X') AS rentedDate,DATE_FORMAT(SaleAndRental.dueDate, '%m-%d-%X') AS dueDate , SaleAndRental.lateFees, SaleAndRental.Discounts, SaleAndRental.paymentMode, Products.salesPrice,Customers.balanceAmount FROM pri_master_sales_rental SaleAndRental, pri_master_products Products, pri_master_customers Customers WHERE SaleAndRental.customerID=Customers.customerID AND SaleAndRental.productID=Products.productID AND SaleAndRental.type='rented' HAVING customerID='$_GET[customerID]' AND productID ='$_GET[productID]' ORDER BY SaleAndRental.rentedDate");

if(mysql_num_rows($result)>0){
$detailsresultset=mysql_fetch_array($result);

?>
<div style="background:url(images/bg.gif); margin:0px 0px 0px 0px;  padding:0px 0px 0px 0px;">
<div style="float:right; line-height:36px;">
<a href="javascript:void(0)" onclick="afterpopup('popupForm')"><img src="images/close.png" style="border:none" title="Close"/></a>&nbsp;&nbsp;</div>
<div style=" line-height:36px; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif;">Returns</div>
</div>
<form name="returnDetails" id="returnDetails">

<div style="padding:10px 10px 0px 15px;" >
<div class='divStyle'><div class='divLabel'><label class='text'>Rented Date </label> </div><div><input size="30" name="rentedDate" id="rentedDate" type="text" value="<?= $detailsresultset['rentedDate']; ?>" readonly="readonly"/></div></div>
<div class='divStyle'><div class='divLabel'><label class='text'>Rental Charges </label></div><div><input size="30" name="rentalPrice" id="rentalPrice" type="text" value="<?= $detailsresultset['rentalPrice']; ?>" readonly="readonly" /></div></div>
<div class='divStyle'><div class='divLabel'><label class='text'>Sales Price </label></div><div><input size="30" name="salesPrice" type="text" value="<?= $detailsresultset['salesPrice']; ?>" readonly="readonly" id="salesPrice"/></div></div>
<div class='divStyle'><div class='divLabel'><label class='text'>Due Date</label></div><div><input size="30" name="dueDate" id="dueDate" type="text" value="<?= $detailsresultset['dueDate']; ?>" readonly="readonly" /></div></div>
<div class='divStyle'><div class='divLabel'><label class='text'>Late fees </label></div><div><input size="30" name="lateCharges" id="lateCharges" type="text" value="<? if($selectResultset['dueDate'] < $selectResultset['curdate()']) { 
                      echo $selectResultset['lateCharges'];
                      } else {
                      echo '0';
                      } ?>" readonly="readonly"/>
<input type="radio" id="radioLateCharges" name="radioLateCharges" onclick="lateBalance()"/></div>
</div>
<div class='divStyle'><div class='divLabel'><label class='text'>Current Charges</label></div><div><input size="30" name="convCharges" type="text" id="convCharges" readonly="readonly"/>&nbsp;<input type="radio" id="radioConvCharges" name="radioLateCharges" onclick="returnBalance()"/></div></div>
<div class='divStyle'><div class='divLabel'><label class='text'>Discount </label></div><div><input size="30" name="Discount" id="Discount" type="text" value="0" onchange='discountAmount(this.value)'/></div></div>
<div class='divStyle'><div class='divLabel'><label class='text'>Amount Due</label></div><div><input size="30" name="balanceAmount" id="balanceAmount" type="text" value="<?= $detailsresultset['balanceAmount']; ?>" readonly="readonly"/></div></div>
<div class='divStyle'><div class='divLabel'><label class='text'></label>
</div>
  <div></div>
</div>
</div>
<div class="divStyle"><div class="divLabel"><label class="text" style="padding: 0px 0px 0px 0px;"></label></div>        
<div>
<input type="submit" name="sendCR" id="sendCR" value="Submit-CR" style="border:double #000000 2px;" onclick="javascript:document.getElementById(\'returnDetails\').submit();"/>
<input type="submit" name="sendCS" id="sendCS" value="Submit-CS" style="border:double #000000 2px;" onclick="javascript:document.getElementById(\'returnDetails\').submit();"/>
<input type="submit" name="sendMoreCR" id="sendMoreCR" value="More Returns" style="border:double #000000 2px;" onclick="javascript:document.getElementById(\'returnDetails\').submit();"/>
<input type="submit" name="sendMoreCS" id="sendMoreCS" value="More Conversions" style="border:double #000000 2px;" onclick="javascript:document.getElementById(\'returnDetails\').submit();"/>
</div></div>
</form>
<!--<label class="text" style="padding:0px 0px 0px 30px;"></label>-->

<div class="divStyle"><div class="divLabel"><label class="text"></label></div> 
  <label class="text" style="padding:0px 0px 0px 46px;"></label>
</div>
</div>
<? } }?>

**Dormilich** · Jan 8 '09, 08:00 AM

Originally posted by divyac

My problem is,if i click on the submit button,nothing is getting submitted.

technically speaking, you do not have a form here, i.e. you are missing the <form> tags.

regards

Ajax Pop-Up

Ajax Pop-Up

Comment

Comment

Comment