updating mysql from table for each row

Question

Im stuck and wanted to see if any one could help me out please. I have built a table in bootstrap v4 which displays products and some data about that product. I currently have a button (green with pencil) that when clicked on in each row sends me to another page where i can see and update all the info on that product and same for red button to delete the product from data base mysqli. What i am trying to do now is add a save button at the side with the others in blue so that i can alter the price and quantity quickly and save the row like in pic screen shot The first save works and database updates as it supose to but the rest dont. The save button does nothing at all and no matter what i seem to try, i cant get no where.

My code:

<?

if(isset($_POST['s1']))
{

                $price = $_POST["price"];
                $quantity = $_POST["quantity"];
                $id = $_POST["id"];                 

$stmt = $con->prepare("UPDATE products set price=?, quantity=? WHERE id = 
?");    
$stmt->bind_param("ssi", $price, $quantity, $id);
$stmt->execute();
$stmt->close();

header('Location: products.php');
}
?>

  //taken out header of the table       

          <tbody>

            <tr>

<?php
     $raw_results = mysqli_query($con, "SELECT * FROM products") or 
die(mysqli_error($con));
while($results = mysqli_fetch_array($raw_results)){

?>
<form method=post action="">
              <td><input class="form-control size-id" value="<? echo 
$results['id']; ?>" name="id"></td>
              <td><? echo $results['title']; ?></td>
              <td><input class="form-control size-price" type="text" value=" 
              <? echo $results['quantity']; ?>" name="quantity"></td>                 
              <td><? echo $results['rrp']; ?></td>
              <td><input class="form-control size-price" type="text" value=" 
              <? echo $results['price']; ?>" name="price"></td>
              <td>
              <button type=submit name=s1 class="btn btn-outline-primary 
btn-sm btn-block-xs-only"> <i class="fa fa-floppy-o" aria-hidden="true"></i> 
</button> 
              <a href="edit_product.php?id=<?=$results['id']?>" class="btn 
btn-outline-success btn-sm" role="button"><i class="fa fa-pencil" aria- 
hidden="true"></i></a> 
              <a href="delete_product.php?id=<?=$results['id']?>" class="btn 
btn-outline-danger btn-sm" role="button"><i class="fa fa-times" aria- 
hidden="true"></i></a>
              </td>
 </tr>
             <?
  }
?>
          </tbody>

Answer 1

You are going to wan't to use AJAX (Asynchronous JavaScript And XML) for this

https://www.w3schools.com/xml/ajax_intro.asp

This way you can update your quantity and price without having the need to refresh the entire page. Also there is no need for a form tag with table cells in them which is invalid.

Please read through this tutorial and you will have an idea what to do. If not i could even provide you with a small code example.

The following script will alert the row_id and quantity you send to the server, without the need of a form.

Not that in my example i put the row_id by hand, of course your PHP script would take care of such things

Example (assumes index.html and echo.php are in same folder):

index.html

<html>
<head>
    <title>Example AJAX</title>
</head>
<body>

<table>
    <tr>
    <td>Row 1</td>
    <td><input id="quantity_1" type="text" size="3" name="quantity_1" /></td>
    <td><img src="save.png" onclick="save(1);" /></td>
    </tr>
    <tr>
    <td>Row 2</td>
    <td><input id="quantity_2" type="text" size="3" name="quantity_2" /></td>
    <td><img src="save.png" onclick="save(2);" /></td>
    </tr>
</table>

<script type="text/javascript">
    function save(row_id) {
    var quantity = document.getElementById('quantity_' + row_id).value;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        }
    };
    xhttp.open("GET", "echo.php?row_id=" + row_id + "&quantity=" + quantity, true);
    xhttp.send();
    }
</script>
</body>
</html>

echo.php

<?php

echo 'row id: ' . intval($_GET['row_id']);
echo ' quantity: ' . intval($_GET['quantity']);

Well echo.php could be your script that saves the submitted values ;) But i leave that part upto you. Be sure to validate input. Never put $_GET vars straight in a SQL query.

updating mysql from table for each row

Question

1 answers

solution1
0 ACCPTED 2018-04-14 18:27:20

updating mysql from table for each row

Question

1 answers

solution1 0 ACCPTED 2018-04-14 18:27:20

solution1
0 ACCPTED 2018-04-14 18:27:20