Develop Reference

How to make input affect an echo

In this problem, when I sum a number to the quantity with the button,I want to change the total but it doesnt change, which is this line:
<td width="20%" class="Text-center"><?php echo number_format($producto['PRECIO']*$producto['CANTIDAD'],2); ?></td>
Here's the php code
<tr>
<td width="40%"><?php echo $producto['NOMBRE'] ?></td>
<td><button onclick="add_number()">mas</button><input type="text" id="suma" name="suma" value="<?php echo $producto['CANTIDAD'] ?>" readonly="readonly"></input></td>
<td width="20%" class="Text-center"><?php echo $producto['PRECIO'] ?></td>
<td width="20%" class="Text-center"><?php echo number_format($producto['PRECIO']*$producto['CANTIDAD'],2); ?></td>
<td width="5%">
<form action="" method="post">
<input type="hidden"
name="id"
value="<?php echo openssl_encrypt($producto['ID'],COD,KEY); ?>">
<button
class="btn btn-danger"
type="submit"
name="btnAccion"
value="Eliminar"
>Eliminar</button>
</form>
</td>
</tr>
Here's the Java code:
function add_number() {
var first_number = parseInt(document.getElementById("suma").value);
var result = first_number + 1;
document.getElementById("suma").value = result
}

In the function add_number where you increment the quantity value, you can also add the price to total cell of table each time, change your JavaScript function like this:
function add_number() {
var suma = parseInt(document.getElementById("suma").value); /* get current quantity */
var total = parseInt(document.getElementById("total").innerHTML); /* get current total */
var percio = parseInt(document.getElementById("percio").innerHTML); /* get price */
document.getElementById("suma").value = suma + 1; /* change quantity */
document.getElementById("total").innerHTML = (suma + percio).toFixed(2); /* change total */
}
Note the usage of innerHTML and value. The difference is because value is used for <input> tag while innerHTML is used for <td> tag.
Also note that you need to sed id for total cell and price cell in oder to read and write in them in your JavaScript function.
<td width="20%" class="Text-center" id="percio">
<?php echo $producto['PRECIO'] ?>
</td>
<td width="20%" class="Text-center" id="total">
<?php echo number_format($producto['PRECIO']*$producto['CANTIDAD'],2); ?>
</td>

How to use jQuery POST instead of html form to delete table entry

I am trying to delete the table entry without opening the .php file using jQuery post.
The whole thing works without problems when I just use the usual html post form.
The alert(data) does not trigger, it only adds ".../?player_id_del=1" or whatever ID click into the URL.
What am I doing wrong?
Here is some of my index.php, i get the whole data from a database:
<table class = "table table-hover">
<thead>
<tr>
<th>Player_ID</th>
<th>Username</th>
<th>First_Name</th>
<th>Last_Name</th>
<th>Rating</th>
<th>Country</th>
<th>Colour</th>
<th></th>
</tr>
</thead>
<tbody>
<? foreach($playerArray as $player):?>
<tr>
<td><? echo $player["PLAYER_ID"]; ?></td>
<td><? echo $player["USERNAME"]; ?></td>
<td><? echo $player["FIRST_NAME"]; ?></td>
<td><? echo $player["LAST_NAME"]; ?></td>
<td><? echo $player["RATING"]; ?></td>
<td><? echo $player["COUNTRY"]; ?></td>
<td><? echo $player["COLOUR"]; ?></td>
<td>
<form id="del-form">
<div>
<input type="number" id="player_id_del" name="player_id_del" value="<?php echo htmlspecialchars($player["PLAYER_ID"]); ?>" />
</div>
<div>
<button type="submit" id="submit-btn" class="btn btn-danger">Delete</button>
</div>
</form>
<script>
$("#submit-btn").click(function(){
$.post("deletePlayer.php", $("#del-form").serialize() , function(data) {
alert(data);
});
});
</script>
</td>
</tr>
<? endforeach ?>
</tbody>
</table>
Here is my deletePlayer.php:
<?php
//include DatabaseHelper.php file
require_once('DatabaseHelper.php');
//instantiate DatabaseHelper class
$database = new DatabaseHelper();
//Grab variable id from POST request
$player_id = '';
if(isset($_POST['player_id_del'])){
$player_id = $_POST['player_id_del'];
}
// Delete method
$error_code = $database->deletePlayer($player_id);
// Check result
if ($error_code == 1){
echo "Player with ID: '{$player_id}' successfully deleted!'";
}
else{
echo "Error can't delete Player with ID: '{$player_id}'. Errorcode: {$error_code}";
}
?>
Thank You in advance for any help!

By default jQuery's click event reload the document so, you should try using,
$("#submit-btn").click(function(e){
e.preventDefault();
e.stopPropagation();
});
Also instead of $.post, try using $.ajax

There are many issues in your code
E.g IDs for form and delete input button are repeating (id of element should not be same it should be unique),
The following code is the tested and working.
<?php
//include DatabaseHelper.php file
require_once('DatabaseHelper.php');
//instantiate DatabaseHelper class
$database = new DatabaseHelper();
$response = array();
//Grab variable id from POST request
$player_id = '';
if(isset($_POST['player_id_del'])){
$player_id = $_POST['player_id_del'];
}
// Delete method
$error_code = $database->deletePlayer($player_id);
// Check result
if ($error_code == 1){
$response["success"] = 1;
$response["id"] = $player_id;
$response["message"] = "Player with ID: '{$player_id}' successfully deleted!'";
}
else{
$response["success"] = 0;
$response["message"]= "Error can't delete Player with ID: '{$player_id}'. Errorcode: {$error_code}";
}
echo json_encode($response);
?>
<table class = "table table-hover" id="mPlayersTabel">
<thead>
<tr>
<th>Player_ID</th>
<th>Username</th>
<th>First_Name</th>
<th>Last_Name</th>
<th>Rating</th>
<th>Country</th>
<th>Colour</th>
<th></th>
</tr>
</thead>
<tbody>
<? foreach($playerArray as $player):?>
<tr id= "<? echo $player["PLAYER_ID"]; ?>">
<td><? echo $player["PLAYER_ID"]; ?></td>
<td><? echo $player["USERNAME"]; ?></td>
<td><? echo $player["FIRST_NAME"]; ?></td>
<td><? echo $player["LAST_NAME"]; ?></td>
<td><? echo $player["RATING"]; ?></td>
<td><? echo $player["COUNTRY"]; ?></td>
<td><? echo $player["COLOUR"]; ?></td>
<td>
<div>
<button type="submit" player-id="<? echo $player["PLAYER_ID"]; ?>" class="btn btn-danger" >Delete</button>
</div>
</td>
</tr>
<? endforeach ?>
</tbody>
</table>
<script>
$(document).ready(function(){
$(".btn-danger").on("click touchend" , function(){
var id = $(this).attr("player-id");
$.ajax({
url: 'deletePlayer.php',
type: 'POST',
data: {
player_id_del: id
},
dataType: 'json',
success: function (response) {
//Add this line and try
response = JSON.parse(JSON.stringify(response));
alert(response['message']);
switch (response['success']) {
case 1:
$("#mPlayer" + response['id']).remove();
break;
}
}
});
});
});
</script>

Changing value in html table dynamically

I have an html table where i retrieve data from a database using PHP. The table is quite simple, i have three fields: Name, Quantity and Price. At the end of the table i have an additional field, Subtot, that shows the final cost (SumOfAllItems(Quantity*Price)).
I need to be able to change the "Quantity" value in each row and the "Subtot" should update accordingly. I also need to be able to set min/max value the user can use to update the cell.
I was thinking to add something like a button or any kind of list/input by the "Quantity" value in each row.
I think i need to use javascript but i am not sure, any suggestion is welcome.
Following my code.
Thanks
<table>
<tbody>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price<th>
</tr>
<?php
while($row2 = $result->fetch_assoc())
{?>
<tr>
<td><?php echo $row2["Name"] ?></td>
<td><?php echo $row2["Quantity"] ?></td>
<td><?php echo $row2["Price"]?></td>
</tr>
<?php
$subtot = $subtot + ($row2["Price"] * $row2["Quantity"])
} ?>
<td></td>
<td><b>Subtot.</b></td>
<td><b><?php echo $subtot2 ." Euro"; $tot = $subtot1 + $subtot2;?> </b></td>
</tbody>
</table>

The following should work, however i do not recommend this method (any method btw) without any validation on server side.
You need this on top of your php file:
<?php
$total = 0;
Then your table like:
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price<th>
</tr>
</thead>
<tbody>
<?php while($row2 = $result->fetch_assoc()) { ?>
<tr>
<td><?php echo $row2['name'] ?></td>
<td><input class="row" min="0" onchange="myFunction()" data-price="<?php echo $row2['price'] ?>" type="number" value="<?php echo $row2['quantity'] ?>"/></td>
<td><?php echo $row2['price'] ?></td>
</tr>
<?php
$total += $row2['price'] * $row2['quantity'];
}
?>
<td></td>
<td>
<b>Subtot.</b>
</td>
<td>
<b id="total"><?php echo $total; ?></b>
</td>
</tbody>
</table>
And you need the following script tag:
<script>
function myFunction(){
var total = 0;
var elements = document.getElementsByClassName("row");
for(var i = 0; i < elements.length; i++) {
total += elements[i].value * elements[i].dataset.price;
}
var totalEl = document.getElementById("total");
totalEl.innerHTML = total;
}
</script>
Again.. this is a very simple solution, but it should work.

Can't get ID of the next php generated row using jquery

I have to generate some text boxes after each line of row sent from database, so I have this user who have 2 rows:
And of course each row belongs to an id:
<td><?php echo $counter--; ?></td>
<td><?php echo $installment['date_now'] ?></td>
<td><?php echo $installment['payment'] ?> $</td></tr>
</tr>
<?php } ?>
<tr><th colspan="10" style="text-align: right;">Remaining:</th>
<th><?php echo ($cash['project_cost'] - $sum) ?> $</th>
</tr>
<tr id="<?php echo $cash['infoid']; ?>"><td colspan="8" style="text-align: right;">Add Payment</td>
<td><input type="date" class="form-control" id="date_pay_now[]"/></td>
<td><input class="form-control" type="text" id="pay_now"/></td>
<td><button id="add_payment" class="btn btn-success glyphicon glyphicon-plus"></button>
</tr>
<tr><td></td></tr><tr><td></td></tr>
<?php $sumCash = $sumCash + $cash['project_cost']; } ?>
<tr>
<th colspan="10">Cash Total</th><th id="final_cash"><?php echo $sumCash ?> $</th>
</tr>
</table>
</div>
<?php } else { ?>
No Payments available
<?php } ?>
Now, when select a date and type an amount, I should send those values into AJAX and but first I need to get the id of the row so I can send it too.
$("#add_payment").click(function()
{
var date_of_pay = $("#date_pay_now").val();
var pay_now = $("#pay_now").val();
var id_pay = $(this).closest('tr').attr('id');
console.log(id_pay);
if(date_of_pay == "" || pay_now == "")
{
$("#date_pay_now").css('border-color', 'red');
$("#pay_now").css('border-color', 'red');
}
if(date_of_pay != "" && pay_now != "")
{
$.ajax
({
//Still not typed
});
}
});
If you see the image, when I click on the first button, I see the id correctly at the console and if they are empty I can see the red color, but when I refresh the page and click directly on the second row button, I can't see any value at the console and no css color due to empty text box shown.
And here when I click on the next button, no color and no id at the console:

Disable button when db is populated enable when null on javascript

I have my database table named material
material:
mat_id mat_name status
1 bolts
2 steel approved
How can I make my button or maybe href link disable when status = 'approved'
on my html table?
like:
option mat_id material name
show button 1 bolts
no button 2 steel
my code for html/php:
<?php
$resource=mysql_query("Select * from material",$con);
while($result2=mysql_fetch_array($resource))
{
?>
<tr>
<th>option</th>
<th>mat_id</th>
<th>material name</th>
</tr>
<tr>
<td align="center">
<?php
$id = $rows['reqraw_id'];
if($rows['status']=="")
{
echo '<a href="addstockout.php?id=$id" > Update </a>';
} ?>
</td>
<td><?php echo $result2['mat_id']; ?></td>
<td><?php echo $result2['mat_name']; ?></td>
</tr>
<?php };?>
There is a problem on this line
echo '<a href="addstockout.php?id=$id" > Update </a>';
It doesn't get the id array from the db.

...
<?php if($result2['status'] == 'approved') { ?>
<td><button disabled="true">Button</button></td>
<?php
} else{ ?>
<td><button>Button</button></td>
<?php } ?>
...

if($result2['status']=="" OR $result2['status']===NULL)
{
echo '<button type="button">Click Me!</button>';
}else{
echo '<button type="button" disabled>Click Me!</button>';
}

<td><?php echo ($result2['status']===NULL)?"button here":"disabled"; ?></td>

I think this should do it:
Instead of
<td>button</td>
put:
<?php
echo '<td><button ';
if(!($result2['status']==="approved"))
{
echo 'disabled="true"';
}
echo '>Click</button></td>';
?>