I want to fetch items from a database and be able to update their quantity by selecting a number from a drop down selection and press the button "Update quantity" to perform the action.
I have the following php code:
echo '<table border="4">
<tr>
<th>ID</th>
<th>Item Name</th>
<th>Current Quantity</th>
<th>New Quantity</th>
<th>Update</th>
</tr>';
for($i=0 ;$i<$k; $i++)
$z = $i+1;
//fetch data from database
$id = the id of the row that the entry/item is at
$item_name = the name of the item
$current_quantity = the current quantity of the item
//create a table of entries
echo '<tr'>
<td>'.$z.'</td>
<td>'.$item_name.'</td>
<td>'.$current_quantity.'</td>
<td>
<select id="quantity" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
.
.
.
</select>
</td>';
echo '<td>
<button type="button" value="'.$id.'" name="updatebtn" id="updatebtn">Update Quantity</button>
</td>';
echo '</tr>';
Where k = number or matches in database
The result is something like this:
////////////////////////////////////////////////////////////////////////////
///ID // Item Name // Current Quantity // New Quantity // Update ///
////////////////////////////////////////////////////////////////////////////
// 1 // Shoes // 10 // 12 // Update Quantity //
////////////////////////////////////////////////////////////////////////////
// 2 // T-shirts // 5 // 8 // Update Quantity //
////////////////////////////////////////////////////////////////////////////
// 3 // Watches // 4 // 2 // Update Quantity //
////////////////////////////////////////////////////////////////////////////
The first 3 columns are populated by the database and New Quantity by the user. As soon as the user is done with the new quantity he/she presses "Update Quantity" to update the database.
Below is the jQuery code i use:
$(document).ready(function(){
$('#updatebtn').click(function(){
//i use this value to find the exact entry in the database
var id = $('#updatebtn').attr('value');
var quantity_selected = $('select#quantity option:selected').attr('value');
$.ajax({
type: "POST",
url: "js/ajax/updatequantity.php",
data: {id: id, new_quantity: quantity_selected}
});
//this is for testing
alert('ok');
});
});
The updatequantity.php script just takes the new quantity and the row of the entry and updates the value.
My problem is:
If i press the "Update Quantity" of the item "Shoes", i see the pop-up "ok" and the quantity is updated. But when i try to do the same for the 2 other items (T-shirts and watches), i get nothing.
Does my js script has trouble to differentiate between the "Update Quantity" buttons? Is there another approach?
ps: i am doing this using wamp on my localhost
Thanks in advance.
