I am trying to create a table of products where a user can add and delete items to their basket. I am writing the basket content to a 'temp' table in my DB. I originally just had this executing via PHP but didn't like the redirecting so I toyed with using jQuery and a separate PHP file to make things act a lot cleaner and smoother.
Now when I tried this with a single product row it worked fine. So I then tried it with two and three rows. When I do this the it works correctly for the first row however, when I try it with the second or third rows it redirects to the action page and I don't understand why. It does write to the database perfectly fine.
Here is the code for the products page
<table class="table table-condensed">
<tr>
<td>
<form id="addItem" action="addBasket.php" method="post">
<input type="hidden" name="product" value="3">
<button id="add" class="btn btn-link"><i class="fa fa-plus-square-o"></i></button>
</form>
</td>
<td>
<form id="remItem" action="remBasket.php" method="post">
<input type="hidden" name="product" value="3">
<button id="rem" class="btn btn-link"><i class="fa fa-minus-square-o"></i></button>
</form>
</td>
<td>
<form id="remAll" action="allBasket.php" method="post">
<input type="hidden" name="product" value="3">
<button id="all" class="btn btn-link"><i class="fa fa-trash"></i></button>
</form>
</td>
</tr>
<tr>
<td>
<form id="addItem" action="addBasket.php" method="post">
<input type="hidden" name="product" value="4">
<button id="add" class="btn btn-link"><i class="fa fa-plus-square-o"></i></button>
</form>
</td>
<td>
<form id="remItem" action="remBasket.php" method="post">
<input type="hidden" name="product" value="4">
<button id="rem" class="btn btn-link"><i class="fa fa-minus-square-o"></i></button>
</form>
</td>
<td>
<form id="remAll" action="allBasket.php" method="post">
<input type="hidden" name="product" value="4">
<button id="all" class="btn btn-link"><i class="fa fa-trash"></i></button>
</form>
</td>
</tr>
</table>
This is then actioned by the following Javascript:
$("#add").click( function() {
$.post( $("#addItem").attr("action"),
$("#addItem :input").serializeArray(),
function(info){ $("#result").html(info);
});
});
$("#addItem").submit( function() {
return false;
});
$("#rem").click( function() {
$.post( $("#remItem").attr("action"),
$("#remItem :input").serializeArray(),
function(info){ $("#result").html(info);
});
});
$("#remItem").submit( function() {
return false;
});
$("#all").click( function() {
$.post( $("#remAll").attr("action"),
$("#remAll :input").serializeArray(),
function(info){ $("#result").html(info);
});
});
$("#remAll").submit( function() {
return false;
});
And I would post all three addBasket.php, remBasket.php, allBasket.php but you'll get the jist from just the addBasket file, if I need to post all three please let me know:
require_once 'core/init.php';
$token = Session::get('user_session');
$product = $_POST['product'];
$exists = DB::getInstance()->query("SELECT * FROM temp WHERE token='$token' AND product='$product'");
if($exists->count()){
$qty = $exists->first()->qty + 1;
DB::getInstance()->query("UPDATE temp SET qty='$qty' WHERE token='$token' AND product='$product'");
}else{
DB::getInstance()->insert('temp', array(
'token' => $token,
'product' => $product,
'qty' => 1
));
}
I will be using much more than two or three rows, the product table will be pulled from a products table and my hope was to use the products id as the value of the hidden field for each row.
What I would like to know primarily is how to stop the redirect happening, if anyone can suggest a neater or more efficient method for this it would be greatly appreciated.
Many thanks
Dave
Well, the problem is how you are selecting them in jQuery and how you have\ named them in HTML.
You should not use the same ID several times, use classes instead. When you use same ID for multiple instances, then HTML DOM model only accepts the top most element, or the first element.
so change:
<form id="addItem" action="addBasket.php" method="post">
To
<form class="addItem" action="addBasket.php" method="post">
and in jQuery do:
$(".additem")
It will work.
Thank you all for your advise and input, I now have it working as I'd like.
I should really have picked up on the id/class thing, that's proper schoolboy oversight, sorry.
Thanks again
Dave
First, your buttons share the same ID, which is not normal as an ID is used to identify one element on the page (that's why document.getElementById() does not have a s after Element whereas document.getElementsByClassName() has it). Use classes instead.
If you want to prevent the default behaviour from happening (in this case, the form submission), just add event.preventDefault(); at the beginning of your callback function, and don't forget to add the parameter event to your callback. Like this :
$(".all").click(function(event) {
event.preventDefault();
$.post(
$(this).parent().attr("action"),
$(this).parent().find(':input').serializeArray(),
function(info){
$("#result").html(info);
}
);
});