looping

[searls03]

ok, here is some code:

<?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM products");
while($row = mysql_fetch_array($sql)){
$product = $row["product"];
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#myform").validate({
		debug: false,

		submitHandler: function(form) {
			// do other stuff for a valid form
			$.post('process.php', $("#myform").serialize(), function(data) {
				$("#price").load("index.php #price");
$('#results').html(data);
			});
		}
	});
});
</script>
<form name="myform" id="myform" method="POST" action="">  
      
        <input type="hidden" name="hiddenField" id="hiddenField" value="<?php echo $product; ?>" />
<input type="submit" name="submit" value="Submit" style="background-color:lightgreen; height:50px; width:100px;">     </form>  

<?php

}
?>

and here is process.php

<?php
include_once("/connect.php");
?>
<?php 
$price=$_POST['hiddenField'];
$sql = "INSERT INTO cart (price) 
	VALUES('$price')";
$rs = mysql_query($sql) or die ("Problem with the query: $sql<br>" . mysql_error());
	echo mysql_error();
	?>

.

 

what is happening is it is supposed to be submitting form without page reload.......but only the first one in the loop does it.  I want all of them to do it.  can anyone help me do this properly.

[AyKay47]

Only the first form is working because you have your JavaScript based on an id, when multiple ids are present in the DOM, only the first one is used, as having multiple ids of the same value defeats the purpose of ids and is invalid. You should be using a class on your form instead.

[searls03]

<form name="myform" class="myform" method="POST" action=""><input type="hidden" name="hiddenField" class="hiddenField" value="<?php echo $product; ?>" />
<input type="submit" name="submit" value="<?php echo $product; ?>" style="background-color:lightgreen; height:50px; width:100px;">   </form>  

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".myform").validate({
		debug: false,

		submitHandler: function(form) {
			// do other stuff for a valid form
			$.post('process.php', $(".myform").serialize(), function(data) {
				$("#price").load("index.php #price");
$('#results').html(data);
			});
		}
	});
});
</script>  

now both work, but they are both submitting the same value???? please help.

[searls03]

my fault...the last loop, not the first.....

[searls03]

but they are all still submitting the same regardless.....

[searls03]

I'm pretty sure it is a lack of association with each other...

[AyKay47]

By chance, does one of the form values get consistently submitted? It may be a case of the two tables not being unique, class, name, etc. try making each form unique (most likely by using a counter in your loop) and set your js selector to be unique as well. I can't say that I've had two of the same table in my DOM before, so I am not positive on the affects of this or if this will solve the issue, however I am fairly certain.

[searls03]

but don't they need to be the same for it to submit right?  could you post some sample code?

[AyKay47]

but don't they need to be the same for it to submit right?  could you post some sample code?

 

im still thinking about the one, perhaps something along the lines of this:

 

$(".myform").each(function(i,e))
{
    $(this).validate({ 
        debug: false,

submitHandler: function(form) {
	// do other stuff for a valid form
	$.post('process.php', $(this).serialize(), function(data) {
		$("#price").load("index.php #price");
                        $('#results').html(data);
});
	}
     });
}

 

my thinking here is to iterate over each form object and call the "validate" method on each one, instead of the entire group in one call. I am not terribly familiar with the .validate plugin so some tweaking may need to be done.

[searls03]

I got it working by putting the code in a loop and then using an id with the form name......now the problem I am having is $price submitting properly....

  <?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM products");
while($row = mysql_fetch_array($sql)){
$product = $row["product"];
$id =$row["id"];
$price =$row["price"];

?>
<form name="myform<?php echo $id; ?>" class="myform<?php echo $id; ?>" method="POST" action=""> 
<input type="hidden" name="product" class="product" value="<?php echo $product; ?>" />
<input type="text" name="price" class="price" value="<?php echo $price; ?>" />
<input type="submit" name="submit" class="submit" value="<?php echo $product; ?>" style="background-color:lightgreen; height:50px; width:100px;">   </form>   
<?php

}
?>

<?php
include_once("connect.php");
?>
<?php 
$product=$_POST['product'];
$price=$_POST['price'];

$sql = "INSERT INTO cart (price, product) 
	VALUES('$price', '$product')";
$rs = mysql_query($sql) or die ("Problem with the query: $sql<br>" . mysql_error());
	echo $sql();
	?>

[AyKay47]

I got it working by putting the code in a loop and then using an id with the form name......now the problem I am having is $price submitting properly....  <?php

 

well, what exactly are your results, a little more detail is needed for me to be able to help you out. Also, I notice that you are not escaping the $_POST values before submitting nor validating that they exist.

 

include_once("connect.php");

if(isset($_POST['product'], $_POST['price']))
{
$product = mysql_real_escape_string($_POST['product']);
$price = mysql_real_escape_string($_POST['price']);

$sql = "INSERT INTO cart (price, product) 
	VALUES('$price', '$product')";
$rs = mysql_query($sql) or die ("Problem with the query: $sql <br />" . mysql_error());
}

[searls03]

nothing....that is the result.....nothing is submitting properly, the form is submitting, but without any values added to database, because they are not submitting.

[AyKay47]

open a "view source" in your browser and make sure that the proper values are present in your form to be sent, that it the first step.

 

the second step is to debug the javascript handling of your form, making sure that the values are correct before submittal to the back end.

[searls03]

here is what it looks like:

<!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>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".delete").validate({
		debug: false,

		submitHandler: function(form) {
			// do other stuff for a valid form
			$.post('delete.php', $(".delete").serialize(), function(data) {
				$("#price").load("index.php #price");
			});
		}
	});
});
</script>
      <script type="text/javascript">
$(document).ready(function(){
	$(".myform1").validate({
		debug: false,

		submitHandler: function(form) {
			// do other stuff for a valid form
			$.post('process.php', $(".myform1").serialize(), function(data) {
				$("#price").load("index.php #price");
			});
		}
	});
});
</script> 
  

  <script type="text/javascript">
$(document).ready(function(){
	$(".myform2").validate({
		debug: false,

		submitHandler: function(form) {
			// do other stuff for a valid form
			$.post('process.php', $(".myform2").serialize(), function(data) {
				$("#price").load("index.php #price");
			});
		}
	});
});
</script> 
  

  
    

<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}

/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: #ADB96E;
}

/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/

.content {

padding: 10px 0;
}

/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#price { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
position:fixed;
right:0px;
height:80%;
width:30%;
border: thick solid #000;
background-color: #FFF;
top:0px;
bottom:50px;
overflow: auto;
}
#total { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
position:fixed;
right:0px;
height:50px;
width:30%;
border: thick solid #000;
background-color: #FFF;
bottom:-50px;
top:80%	}


-->
</style>
  
    
    </head>

<body>

<div class="container">
  <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background: #C6D580; display:block;" /></a> 
    <!-- end .header --></div>
  <div class="content">
    <div id="price"> 
            <br />


</div>   
<div id="total"><br />

</div> 
         <form name="myform1" class="myform1" method="POST" action=""> 
<input type="hidden" name="hiddenField" class="" value="Test 1" />
<input type="submit" name="submit" class="submit" value="Test 1" style="background-color:lightgreen; height:50px; width:100px;">   </form>   
<form name="myform2" class="myform2" method="POST" action=""> 
<input type="hidden" name="hiddenField" class="" value="Test 2" />
<input type="submit" name="submit" class="submit" value="Test 2" style="background-color:lightgreen; height:50px; width:100px;">   </form>   

    
    <p> </p>
    <p> </p>

    <p> </p>
    <p> </p>
  <!-- end .content --></div>
  <div class="footer">
    <p>Footer</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

it also is only submitting data to my price row......not the product row......I think this is part of problem.......

[searls03]

ok, I got it figured out.....now one last problem......this code only seems to not refresh the page everyother time.....one time it doesnt and the next time it does.....it aint ever supposed to...

<?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM cart");
while($row = mysql_fetch_array($sql)){
$id =$row["id"];
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".delete<?php echo $id; ?>").validate({
		debug: false,

		submitHandler: function(form) {
			// do other stuff for a valid form
			$.post('delete.php', $(".delete<?php echo $id;?>").serialize(), function(data) {
				$("#price").load("index.php #price");$("#total").load("index.php #total");
			});
		}
	});
});
</script>
    <?php
}
?>

 <?php
// Query member data from the database and ready it for display
$sql = mysql_query("SELECT * FROM cart");
while($row = mysql_fetch_array($sql)){
$product = $row["product123"];
$price1 = $row["price"];
$id = $row["id"];



?>
<form name="delete<?php echo $id; ?>" class="delete<?php echo $id; ?>" method="POST" action=""> 
<input type="hidden" name="hiddenField" class="hiddenField" value="<?php echo $id; ?>" />
<input type="submit" name="submit" class="submit" value="delete" style="background-color:lightgreen; height:50px; width:100px;">   </form>
   <?php  echo $product;
echo"<br />";
echo $price1;
echo"<br />";
$total =  $price1 + $total;
?>
<?php
}
?>