Ajax Pop-up

[divyac]

I am doing an inventory project in which i need to do sales and rentals.As the starting point,there will be text box where the customer id is entered.If the customer id is valid another text box will appear in which the product id should be entered.If that particular product is for rentals, a popup will appear which is done using ajax.In that popup i need to add some data and submit it in the database.My problem is,if i click on the submit button,nothing is getting submitted.what may be the problem?????help me please....

[jeffman]

Your description is very general. Please post some code.(You do have to be careful with submit buttons, though. If your form submits, your page may reload without doing your ajax thing. When I'm set up for ajax, I use form elements -- buttons and such -- with no form tags. And my button is type="button", not "submit". Food for thought.)

[divyac]

Your description is very general. Please post some code.(You do have to be careful with submit buttons, though. If your form submits, your page may reload without doing your ajax thing. When I'm set up for ajax, I use form elements -- buttons and such -- with no form tags. And my button is type="button", not "submit". Food for thought.)

The coding 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

<?phpinclude "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="java script: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="java script: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

var xmlHttpvar globalStringvar returnPopup=0var x=0var y=0function 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=stateChangedcustomerxmlHttp.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\')">  <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 functionfunction 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.php and this is the place where the submit buttons are present..

<?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="java script:void(0)" onclick="afterpopup('popupForm')"><img src="images/close.png" style="border:none" title="Close"/></a>  </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"/> <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="java script:document.getElementById(\'returnDetails\').submit();"/><input type="submit" name="sendCS" id="sendCS" value="Submit-CS" style="border:double #000000 2px;" onclick="java script:document.getElementById(\'returnDetails\').submit();"/><input type="submit" name="sendMoreCR" id="sendMoreCR" value="More Returns" style="border:double #000000 2px;" onclick="java script:document.getElementById(\'returnDetails\').submit();"/><input type="submit" name="sendMoreCS" id="sendMoreCS" value="More Conversions" style="border:double #000000 2px;" onclick="java script: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><? } }?>

[jeffman]

Are these the buttons that don't work?

<input type="submit" name="sendCR" id="sendCR" value="Submit-CR" style="border:double #000000 2px;" onclick="java script:document.getElementById(\'returnDetails\').submit();"/><input type="submit" name="sendCS" id="sendCS" value="Submit-CS" style="border:double #000000 2px;" onclick="java script:document.getElementById(\'returnDetails\').submit();"/><input type="submit" name="sendMoreCR" id="sendMoreCR" value="More Returns" style="border:double #000000 2px;" onclick="java script:document.getElementById(\'returnDetails\').submit();"/><input type="submit" name="sendMoreCS" id="sendMoreCS" value="More Conversions" style="border:double #000000 2px;" onclick="java script:document.getElementById(\'returnDetails\').submit();"/>

For one, the escape character in \'returnDetails\' looks wrong. I looked to see if we were already embedded in single quotes, and I can't see any, so this comes up as an error. Why do you explicitly call the form's submit method in a click handler when that's what a submit button already does? If the button did work, you'd probably submit the form twice. So if there really is a good reason for submitting it this way, you'd better add return false to your click handler.It won't throw an error, but you do not need to write javascript: in an event handler. It's only needed if you put code in an href attribute.Of course the form tag has no method or action specified, so I'm not sure what you want to happen.