Ajax data update

[arsohail08]

Dear Master Brains

I am stuck in basic level of Ajax function. I am updating data table using Ajax but it does not work at all.
Here is my PHP code:

	
		<form id="fupForm" name="form1" method="post" action="">
		<tr>
			
		<td id="id"><input type="hidden" name="id" id="id" value="<?php echo $product ['id'];?>"/>
               <?    php echo $product ['id'];?></td>
			
		<td><input type="hidden" name="prodName" id="prodName" value="<?php echo $product 
                ['prodName'];?>"/><?php echo $product ['prodName'];?></td>
			
		
		<td><input type="hidden" name="img" class="img-thumbnail" id="img" value="<?php echo 
                $product ['prodImage'];  ?>" width="40" height="50">
		</input>
			
		<img class="img-thumbnail" id="img" name="img" src="view/<?php echo $product 
               ['prodImage'];  ?>" width="40" height="50">
		
		</td>
		
		<td> <select name="qty" id="qty"><?php for($x =1; $x<=15; $x++) { echo "<option> $x 
               </option>" ;}  ?></select></td>
		
		<td>
		<button name="save" id="save" class="btn btn-primary">Add to Cart</button>
			
		</td>
		</tr>
		</form>

Here is my Ajax code
	<script>
		  
	  $(document).ready(function(){
			  

    // code to read selected table row cell data (values).
    $("#fupForm").on('click','#save',function(e){
		e.preventDefault();
         // get the current row
         var form =$(this).closest("#prodtable"); 
		
         var id= form.find("#id").val();
         var prodName= form.find("#prodName").val(); 	// get the value of prduct name 
         var img= form.find("#img").val(); 				// get the value of product image
         var qty= form.find("#qty").val(); 				// get  the qty of product
      var data= id+"\n"+prodName+"\n"+qty;
	alert(data);
         
       $.ajax ({
			 url: "controller/cartaction.php",
			 method: "post",
			 data:{ 
					id:id, 
				 	prodName:prodName,
				 	img:img,
				 	qty:qty
			 		},
		 
		  
		 });
		
  
});
	});
   
</script>

Would you please check it where I am doing wrong in Ajax, if I do not use Ajax and use direct PHP code, the database table updates. 

Much appreciate for the assistance. 

Regards
Sam

[John_Betong]

Inside ’<form …>’ you are missing a JavaScript call, onkeyup, onkeydown, onenter , etc

Edit:

Just noticed the $ jquery call. Is jquery loaded?

[arsohail08]

Yes it is working fine but not his formula, spend heaps of time on this

[John_Betong]

Have you checked the PHP file? I had problems with the file path in the following demo:

Ajax Dynamic Search Demo - PDO Version

[Drummin]

@arsohail08

<? php echo $product ['id'];?>

should be

<?php echo $product['id'];?>

There are a few problems in the markup like shown above so make sure there are no page errors first. Once you get that done you might add the missing opening and closing <table> tags with the ID identifier you are looking for the items to be contained in.

<table id="prodtable">

Also note you might need to change your “product id” id="id" input value to a unique name other than id like prodid so there is no conflict in Javscript or ajax passing the information on.
EDIT: I just noticed you have <td id="id"> so there was a duplicate ID being used. Make sure all IDs are unique.

<input type="hidden" name="id" id="prodid" value="<?php echo $product['id'];?>"/>

…and in your script…

 var id= form.find("#prodid").val();

This is my edited version.

<form id="fupForm" name="form1" method="post" action="">
	<table id="prodtable">
		<tr>
			<td><input type="hidden" name="id" id="prodid" value="<?php echo $product['id'];?>"/><?php echo $product['id'];?></td>
				
			<td><input type="hidden" name="prodName" id="prodName" value="<?php echo $product['prodName'];?>"/><?php echo $product['prodName'];?></td>
			
			<td>
				<input type="hidden" name="img" class="img-thumbnail" id="img" value="<?php echo $product['prodImage'];?>" width="40" height="50"></input>				
				<img class="img-thumbnail" id="img" name="img" src="view/<?php echo $product['prodImage'];  ?>" width="40" height="50">			
			</td>
			
			<td><select name="qty" id="qty"><?php for($x =1; $x<=15; $x++) { echo '<option value="'.$x.'">'.$x.'</option>'."\r" ;}  ?></select></td>
			
			<td><button name="save" id="save" class="btn btn-primary">Add to Cart</button></td>
		</tr>
	</table>
</form>

<script type="text/javascript">
		  
	$(document).ready(function(){
	    // code to read selected table row cell data (values).
	    $("#fupForm").on('click','#save',function(e){
			e.preventDefault();
			// get the current row
			var form =$(this).closest("#prodtable"); 
			
			var id= form.find("#prodid").val();
			var prodName= form.find("#prodName").val(); 	// get the value of prduct name 
			var img= form.find("#img").val(); 				// get the value of product image
			var qty= form.find("#qty").val(); 				// get  the qty of product
			var data= id+"\n"+prodName+"\n"+qty;
			//alert(data);
			
			$.ajax ({
				url: "controller/cartaction.php",
				method: "post",
				data:{ 
					id:id, 
					prodName:prodName,
					img:img,
					qty:qty
				},
			
			});
		
		});
	});
   
</script>