I am trying to build a Point of Sale System. I am not very good at Ajax/javascript, php is okish.
My goal is to make a dynamic page that will have many buttons that will loop through a php code grabing items from database(I have this already). this is a submit button for dynamically created forms, with fields of product and price. I need to know how I could post each of these forms to my database, without a page refresh, then, without a refresh, show the item that was submitted, and any other items that my have previously been submitted(for that session) in an area off to the side. my requirement for this part is that they need to be displayed inside of another form, that I can then update or delete the product, and then the area updates(again, without a refresh). then at the bottom, the total price will display. can anyone help me with this? I hope this makes some sense....
submitHandler: function(form) {
// do other stuff for a valid form
$.post('empty.php', $(".empty").serialize(), function(data) {
$("#total").load("index.php #total"); $("#txtHint").load("index.php #txtHint");
});
}
});
});
</script>
<?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM cart where academy ='$academy' && cart_id = '".$cid."' ");
while($row = mysql_fetch_array($sql)){
$id =$row["id"];
submitHandler: function(form) {
// do other stuff for a valid form
$.post('delete.php', $("#delete<?php echo $id;?>").serialize(), function(data) {
$("#total").load("index.php #total");
$("#txtHint").load("index.php #txtHint");
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".delete<?php echo $id2; ?>").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
$.post('delete.php', $(".delete<?php echo $id2;?>").serialize(), function(data) {
$("#total").load("index.php #total");$("#txtHint").load("index.php #txtHint");
});
}
});
});
</script>
<?php
}
?>
<?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM products");
while($row = mysql_fetch_array($sql)){
$id =$row["id"];
?>
<script type="text/javascript">
$(document).ready(function(){
$(".myform<?php echo $id; ?>").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $(".myform<?php echo $id;?>").serialize(), function(data) {
$("#total").load("index.php #total"); $("#txtHint").load("index.php #txtHint");
});
}
});
});
</script>
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myfor").serialize(), function(data) {
$("#total").load("index.php #total"); $("#txtHint").load("index.php #txtHint");
});
}
});
});
</script>
<link rel="stylesheet" href="chosen/chosen.css" />
<script>
function update_data(){
// set up a point to the iFrame
var ifrm=document.getElementById('frame1');
ifrm.setAttribute('src', 'load_data.php');
document.getElementById('test123').value = document.getElementById('test123').value;
document.getElementById('price_text').value = document.getElementById('price').value;
document.getElementById('total_text').value = document.getElementById('total').value;
// the product_txtbox would be where you want the product to be place on your page, etc.
</script>
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process1.php', $(".product").serialize(), function(data) {
$("#price").load("index.php #price");
$("#total").load("index.php #total");
});
}
});
});
</script>
submitHandler: function(form) {
// do other stuff for a valid form
$.post('update.php', $(".update<?php echo $id + 1;?>").serialize(), function(data) {
$("#total").load("index.php #total");
});
}
});
});
</script>
<script type="text/javascript">
function submitForm(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","delete_data.php?q="+str,true);
xmlhttp.send();
$("#total").load("index.php #total");
$("#txtHint").load("index.php #txtHint");
}
</script>
<script type="text/javascript">
function update(str,dat,dat2,disc)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","update.php?q="+str+"&price="+dat2+"&qty="+dat+"&discount="+disc,true);xmlhttp.send();
$("#total").load("index.php #total");
$("#txtHint").load("index.php #txtHint");
$("#total").load("index.php #total");
$("#total").load("index.php #total");
}
</script>
<script type="text/javascript">
function price(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","update1.php?q="+str+"&price="+document.getElementById.('price1234'),true);xmlhttp.send();
$("#total").load("index.php #total");
$("#txtHint").load("index.php #txtHint");
}
</script>
<?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM cart where academy = '".$academy."' && cart_id = '".$cid."' order by id DESC");
while($row4 = mysql_fetch_array($sql)){
$product = $row4["product123"];
$price1 = $row4["price"];
$id = $row4["id"];
$qty = $row4["quantity"];
if($product !=""){
</div> <?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM products");
while($row5 = mysql_fetch_array($sql)){
$product = $row5["product"];
$id =$row5["id"];
$price =$row5["price"];
<script type="text/javascript">
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
</script>
</body>
</html>
Currently I have it set up so that a DIV will refresh after the product is submitted, only problem is that if the DIV refreshes before the database stores it, it doesn't update then.....that is why I would like to do this without any sort of http refresh at all... the code goes like that for a while, but hopefully you get the main idea(sorry it is so much lol)
submitHandler: function(form) {
// do other stuff for a valid form
$.post('empty.php', $(".empty").serialize(), function(data) {
$("#total").load("index.php #total"); $("#txtHint").load("index.php #txtHint");
});
}
});
});
</script>
<?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM cart where academy ='$academy' && cart_id = '".$cid."' ");
while($row = mysql_fetch_array($sql)){
$id =$row["id"];
submitHandler: function(form) {
// do other stuff for a valid form
$.post('delete.php', $("#delete<?php echo $id;?>").serialize(), function(data) {
$("#total").load("index.php #total");
$("#txtHint").load("index.php #txtHint");
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".delete<?php echo $id2; ?>").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
$.post('delete.php', $(".delete<?php echo $id2;?>").serialize(), function(data) {
$("#total").load("index.php #total");$("#txtHint").load("index.php #txtHint");
});
}
});
});
</script>
<?php
}
?>
<?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM products");
while($row = mysql_fetch_array($sql)){
$id =$row["id"];
?>
<script type="text/javascript">
$(document).ready(function(){
$(".myform<?php echo $id; ?>").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $(".myform<?php echo $id;?>").serialize(), function(data) {
$("#total").load("index.php #total"); $("#txtHint").load("index.php #txtHint");
});
}
});
});
</script>
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myfor").serialize(), function(data) {
$("#total").load("index.php #total"); $("#txtHint").load("index.php #txtHint");
});
}
});
});
</script>
<link rel="stylesheet" href="chosen/chosen.css" />
<script>
function update_data(){
// set up a point to the iFrame
var ifrm=document.getElementById('frame1');
ifrm.setAttribute('src', 'load_data.php');
document.getElementById('test123').value = document.getElementById('test123').value;
document.getElementById('price_text').value = document.getElementById('price').value;
document.getElementById('total_text').value = document.getElementById('total').value;
// the product_txtbox would be where you want the product to be place on your page, etc.
</script>
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process1.php', $(".product").serialize(), function(data) {
$("#price").load("index.php #price");
$("#total").load("index.php #total");
});
}
});
});
</script>
submitHandler: function(form) {
// do other stuff for a valid form
$.post('update.php', $(".update<?php echo $id + 1;?>").serialize(), function(data) {
$("#total").load("index.php #total");
});
}
});
});
</script>
<script type="text/javascript">
function submitForm(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","delete_data.php?q="+str,true);
xmlhttp.send();
$("#total").load("index.php #total");
$("#txtHint").load("index.php #txtHint");
}
</script>
<script type="text/javascript">
function update(str,dat,dat2,disc)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","update.php?q="+str+"&price="+dat2+"&qty="+dat+"&discount="+disc,true);xmlhttp.send();
$("#total").load("index.php #total");
$("#txtHint").load("index.php #txtHint");
$("#total").load("index.php #total");
$("#total").load("index.php #total");
}
</script>
<script type="text/javascript">
function price(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","update1.php?q="+str+"&price="+document.getElementById.('price1234'),true);xmlhttp.send();
$("#total").load("index.php #total");
$("#txtHint").load("index.php #txtHint");
}
</script>
<?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM cart where academy = '".$academy."' && cart_id = '".$cid."' order by id DESC");
while($row4 = mysql_fetch_array($sql)){
$product = $row4["product123"];
$price1 = $row4["price"];
$id = $row4["id"];
$qty = $row4["quantity"];
if($product !=""){
</div> <?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM products");
while($row5 = mysql_fetch_array($sql)){
$product = $row5["product"];
$id =$row5["id"];
$price =$row5["price"];
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!-- end .content --></div>
<!-- end .container --></div>
<script type="text/javascript">
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
</script>
</body>
</html>
[/PHP]It just goes on like this for awhile then....hopefully you can help me out (sorry for so much code lol)
I deleted cause I didn't want to get involved with this, but you caught me. It's like having two or more ID's with the same name. The browser don't now which one. The $(document).ready(function() is where the browser goes after the page loads, yours don't know where to go. (simplified)
You have a number of errors in your coding. Putting your js/jq together will help you find them.
function update_data() has no end }. You duplicate your ajax object in function showUser(), function submitForm(), function update(), and function price(). These are done in javascript but you use jquery for a number of other ajax post calls, why not have some consistency? Is any of this responsible for your problems? Possible, I don't know. Cleaner code would help tremendously.
Since things 'refresh', I'd say it's in the js/jq code and not the php. But your php has errors in writing the html. At lest that's what my editor says.
Sorry I couldn't be more help. Clean up the code and see what happens.
There is always http://validator.w3.org/
Before you post, read our: 
