Submit button on each row of a table that inserts data of that row into database

Question

As you can see, i have this page where there is the 'add to cart' button on each table row. Lets say i click 'add to cart' for the table row where product id is 1, i would want the productid, productname, cartquantity to be transferred to the shopping cart on another webpage. is it possible?

okay so as you can see i would like to add product id 1 to my cart with quantity 3. But when i pressed add to cart

It always runs to my last productid which is shofffwef and adds it to the cart instead. Not sure what is going wrong :(

Here is my sql code for the add to cart button

if(isset($_POST['insert'])){ //$_POST[X] X = name of textbox (***You got to do this In BASHOP) take note the productname.               
    $queryinsert = "insert into cart(productid,productname,cartquantity,amount) SELECT productid,productname,'$_POST[cartquantity]', '50' FROM product WHERE productid='$_POST[hidden]'";       
           mysqli_query($dbconn,$queryinsert);                                                 
    }

And here is my code to show the table as in the first picture.

    while($row = mysqli_fetch_array($result)) {   
    echo "<tr>";
    echo "<td>"."<input type = 'text' name='productid' value=". $row['productid'] ."></td>";
    echo "<td>"."<input type = 'text' name='productname' value=". $row['productname'] ."></td>";
    echo "<td>" . $row['retailprice'] . "</td>";
    echo "<td>" . $row['pointsformula'] . "</td>";
    echo "<td>"."<button type='button' class='quantityaddsub' id='sub' onclick='quantitysub(".$row['productid'].")'>-</button>".
                    "<input type='text' class='quantity' name='cartquantity' id='quantity".$row['productid']."' value=1>".
                    "<button type='button' class='quantityaddsub' id='add' onclick='quantityadd(".$row['productid'].")'>+</button>".
    "<input type='hidden' name='hidden' value=".$row['productid']."></td>";
    echo "<td>" . "<input type='submit' name='insert' value='Add To Cart'" . "></td>";
    echo "</tr>";
}
echo "</table>";

I've searched everywhere but couldnt find a solution, please help me thanks!

@frz3993 yup, i did it but didnt show in here, along with adding method='post' to the
tag — mctjl_1997, May 14 '16 at 15:47
You need to separate each row with its own form. You have a lot of name='hidden' inputs — Moussa Khalil, Jun 05 '16 at 15:57
Oh, so i leave the name='hidden' inputs as it is? Just add in forms for each row? I've done that but the problem doesnt go away .. — mctjl_1997, Jun 06 '16 at 05:01

cssyphus · Answer 1 · 2016-05-14T16:27:34.383

In fact, you do not need <form> tags on each row -- in fact, you might not need <form> tags at all if you submit your form using AJAX. Even if you submit the form as a form, you only need one set of <form> tags.

What you do need, though, is some javascript to manage the add to cart process.

jsFiddle Demo

Basically, you need to create soft cart on the page itself. For this, you can use a javascript variable or a hidden input field. Let's use a hidden input field and leave it unhidden for the time being so you can see what's going on:

<form id="tcform" method="post" action="checkout.php">
    <input type="text" id="tempcart" /><!-- when ready, change to type="hidden" -->
</form>

Each time an AddToCart button is clicked, it will add that TR's id to the shopping cart. To make things easier, let's create an ID for each TR, add the productID as a component of that TR's ID:

$out = "<table>";
while($row = mysqli_fetch_array($result)) {   
    $out .= "<tr id='tr_" .$row['productid']. "'>";
    $out .= "<td>"."<input type = 'text' name='productid' value=". $row['productid'] ."></td>";
    $out .= "<td>"."<input type = 'text' name='productname' value=". $row['productname'] ."></td>";
    $out .= "<td>" . $row['retailprice'] . "</td>";
    $out .= "<td>" . $row['pointsformula'] . "</td>";
    $out .= "<td>"."<button type='button' class='quantityaddsub' id='sub' onclick='quantitysub(".$row['productid'].")'>-</button>".
                    "<input type='text' class='quantity' name='cartquantity' id='quantity".$row['productid']."' value=1>".
                    "<button type='button' class='quantityaddsub' id='add' onclick='quantityadd(".$row['productid'].")'>+</button>".
    "<input type='hidden' name='hidden' value=".$row['productid']."></td>";
    $out .= "<td>" . "<input type='submit' name='insert' value='Add To Cart'" . "></td>";
    $out .= "</tr>";
}
$out .= "</table>";
echo $out;

Now, each TR has an id like: tr_17

Your AddToCart code can look like this:

$('.btnAddToCart').click(function(){
    var thisTR = $(this).closest('tr');
    thisTR.addClass('clicked'); //optional - use CSS to color row
    var trid = thisTR.attr('id'); //tr_17
    trid = trid.split('_')[1]; //17
    $('#tempcart').val( $('#tempcart').val() +'|'+ trid);
};

When the CHECKOUT button is clicked, you can use javascript to send the tcform instead:

$('#btnCheckout').click(function(){
    $('#tcform').submit();
});

Note that the above example uses jQuery, so be sure to include its library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Final note: when you are troubleshooting a project like this, break it into steps. The checkout.php page (or whatever yours is called) should first be tested using hard-coded values.

Once it is reliably putting hard-coded values into the database, next test what data it is receiving. Do this by creating a dummy checkout.php page that just echos to the screen the data it receives via $_POST. Once you are sure both of those parts are working correctly, then put them together and ... hopefully it will work first time. If not, at least you know what IS working and the debugging job is much simpler/faster.

Bon chance.

Oh i see, i will look into it and try it out when im free thanks so much! So do you mean that when i add to cart, it stores in a temporary cart, and only at the end i submit the entire temporary cart to to the database? Because the user may go to other pages and im afraid that the temporary cart data will be lost if the user navigates to another page before going back to the cart. — mctjl_1997, May 16 '16 at 01:10
If you are worried about user leaving the current page, then you can store the temporary cart on the server, [perhaps making use of the `$_SESSION` variable](http://stackoverflow.com/questions/37093708/make-a-button-countdown-timer-which-will-be-permanently-disabled-after-5-minutes/37105653#37105653) or in a MySQL table - but again, you would probably use a `SESSION` variable to identify the user. Store a timestamp with the cart so you know if it is obsolete. Those are some ideas. For more info, google `how do php sessions work` — cssyphus, May 16 '16 at 02:32
Thanks a lot for your input but i really really want to do it in the database way. Uhhmm, okay i will try to update my post pictures and maybe you can have a look again? :) sorry for inconviniencing you — mctjl_1997, Jun 05 '16 at 13:24

score 0 · Answer 2 · answered May 14 '16 at 15:58

0

Have you checked if the items have been inserted into the table in database (it should be named as "cartitems" or similar..)?

As far as I know, the shopping cart page just retrieve the items from that table. So, first make sure that the items have been inserted successfully.

answered May 14 '16 at 15:58

DoT

89
4

yeah items can be inserted successfully but it doesnt insert in the correct row of data, instead it inserts another row's data – mctjl_1997 May 16 '16 at 01:15

score 0 · Answer 3 · answered Jun 05 '16 at 16:00

You need to separate each row with its own form. Assuming you want to avoid jQuery

while($row = mysqli_fetch_array($result)) {   
echo "<tr><form action='otherscript.php' method='POST'>";
echo "<td>"."<input type = 'text' name='productid' value=". $row['productid'] ."></td>";
echo "<td>"."<input type = 'text' name='productname' value=". $row['productname'] ."></td>";
echo "<td>" . $row['retailprice'] . "</td>";
echo "<td>" . $row['pointsformula'] . "</td>";
echo "<td>"."<button type='button' class='quantityaddsub' id='sub' onclick='quantitysub(".$row['productid'].")'>-</button>".
                "<input type='text' class='quantity' name='cartquantity' id='quantity".$row['productid']."' value=1>".
                "<button type='button' class='quantityaddsub' id='add' onclick='quantityadd(".$row['productid'].")'>+</button>".
"<input type='hidden' name='hidden' value=".$row['productid']."></td>";
echo "<td>" . "<input type='submit' name='insert' value='Add To Cart'" . "></td>";
echo "</form></tr>";
}
echo "</table>";

That way when you click submit, only the data of that row is sent. Right now it's a bit messy.

@Marcus I would assume so but try this anyway $queryinsert = "insert into cart(productid,productname,cartquantity,amount) Values('$_POST[productid]', '$_POST[productname] ', ,'$_POST[cartquantity]', '50') "; since you already sent them no need for a query to get them — Moussa Khalil, Jun 06 '16 at 08:02
Okay, im getting the last product from the row as shown even if i click the first product. "insert into cart(productid,productname,cartquantity,amount) SELECT productid,productname,'1', '50' FROM product WHERE productid='2'" Im thinking it is due to my 'add to cart' button problem, it is not recognizing the row i've clicked properly — mctjl_1997, Jun 07 '16 at 17:11

Submit button on each row of a table that inserts data of that row into database

3 Answers3

Linked