Multiple ajax returns and sum values - javascript

I have a group of dropdowns with a list of players. When a player is selected, their 'Value' should appear next to the drop down and the Total should update to be the sum of all selected players values.
php code below is for two players but I have ten, will likely have ten different similar functions for each of the dropdowns
select-player.php
<!--player1-->
<tr>
<td style="width:50%;">
<select name="player1" id="player1" onchange="showvalue1()">
<option disabled selected value></option>
<?php
$sql = "SELECT * FROM players ORDER BY value DESC";
$result = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($result);
if ($resultCheck > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='". $row['playername'] ."'>" .$row['playername'] ."</option>";
}
}
?>
</select>
</td>
<td style="width:50%;" id="value1">
</td>
</tr>
<!--player2-->
<tr>
<td style="width:50%;">
<select name="player2" id="player2" onchange="showvalue2()">
<option disabled selected value></option>
<?php
$sql = "SELECT * FROM players ORDER BY value DESC";
$result = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($result);
if ($resultCheck > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='". $row['playername'] ."'>" .$row['playername'] ."</option>";
}
}
?>
</select>
</td>
<td style="width:50%;" id="value2">
</td>
</tr>
<tr>
<th style="width:50%";>Total</th>
<th style="width:50%;" id="total"></th>
</tr>
ajax.js
function showvalue1(){
var x = document.getElementById("player1").value;
var t = document.getElementById("total").value;
$.ajax({
url:"../showvalue.php",
method: "GET",
datatype: 'json',
data:{
id : x,
total : t
},
success:function(data){
$("#value1").html(data.price);
$("#total").html(data.newtotal);
}
})
}
function showvalue2(){
var x = document.getElementById("player2").value;
var t = document.getElementById("total").value;
$.ajax({
url:"../showvalue.php",
method: "GET",
datatype: 'json',
data:{
id : x,
total : t
},
success:function(data){
$("#value2").html(data.price);
$("#total").html(data.newtotal);
}
})
}
I've read that jsonencode is used to send arrays back that I can then assign to IDs in js.
showvalue.php
<?php
include_once 'includes/dbh.inc.php';
$pl = $_POST['id'];
$pl = trim($pl);
$total = 0;
$total = $_POST['total'];
$sql = "SELECT value FROM players WHERE playername='{$pl}'";
$result = mysqli_query($conn, $sql);
while($rows = mysqli_fetch_array($result)){
$newtotal = 0;
$value = $rows['value'];
$newtotal = $total + $value;
$ret = array('price'=>$value, 'newtotal'=>$newtotal);
echo json_encode($ret);
}
?>
Not getting any errors or console returns but also no values are being returned.
What am I missing?

Checking your HTML source, #total is a table cell:
<th id="total"></th>
And you are retrieving it using .value:
var t = document.getElementById("total").value;
But .value is for inputs, not text in a table cell, so that won't work.
To get the text, using jQuery instead of vanilla JS (since the rest of your code is jQuery):
var t = $('#total').text();

Related

Chosen Plugin Not Updated Select Box based on Ajax Result

I am working on two select box. One Select Box contain "Product Categories" and Second Select Box Contain Products. As Showing in the following image.
I can search both box either using product or using category. In the start if search using only products it shows all the products, that is fine. But problem is with category.
When i select any category then it should cleared all the products and show only category related products. but it is not updating the result.
Here is my Js
$("#pcategories").chosen().change(function(){
var val = $(this).val();
var info = 'id=' + val;
$.ajax({
type: "GET",
url: "getproduct.php",
data: info,
success: function(response){
var len = response.length;
$("#selectedproducts").empty();
for( var i = 0; i<len; i++){
var product_id = response[i]['product_id'];
var product_name = response[i]['product_name'];
$("#selectedproducts").append("<option value='"+product_id+"'>"+product_name+"</option>");
}
}
});
});
Here is my HTML
<select name="productcategories" style="width:600px; "class="chzn-select" id="pcategories" required>
<option>Select Category</option>
<?php
$result = $db->prepare("SELECT * FROM categories");
$result->bindParam(':userid', $res);
$result->execute();
for($i=0; $row = $result->fetch(); $i++){
?>
<option value="<?php echo $row['category_name'];?>"><?php echo $row['category_name']; ?></option>
<?php
}
?>
Here is HTML for Products
<select name="product" style="width:600px; "class="chzn-select" id="selectedproducts" required>
<option></option>
<?php
$result = $db->prepare("SELECT * FROM products");
$result->bindParam(':userid', $res);
$result->execute();
for($i=0; $row = $result->fetch(); $i++){
?>
<option value="<?php echo $row['product_id'];?>"><?php echo $row['product_code']; ?> - <?php echo $row['product_name']; ?> | Price: <?php echo $row['price']; ?></option>
<?php
}
?>
Where is the error? How can i update the products based on the category ?

Updating rows of dynamic MySQL table using user input

UPDATE: for some reason the php file won't read the mysqli_query statment.
I have a dynamically filled table that has an input box to input a certain quantity amount in order to move a part to a different location with that quantity. Right now I am just trying to get the update code to work to update the current amount based on the inputted amount. Eventually I will add the ability to insert a new row into MySQL based on the inputted amount and inputted location.
It seems to be accessing the update.php file but have had no luck in the MySQL database being updated. I'm not sure how to send the data to the php file in order to update the appropriate rows.
This is my webpage:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<?php
if (isset($_GET['Placeid'])){
$moveplace = $_GET['Placeid'];
$sql = "SELECT *
FROM Parts p, Locations l
WHERE Placeid = '$moveplace' and p.locationid = l.locationid";
$result = mysqli_query($conn, $sql);
$queryResult = mysqli_num_rows($result);
if ($queryResult > 0){
while ($row = mysqli_fetch_assoc($result)){
<form onsubmit='updatetable()'
<table id='tablerun' class=searcht style='background-color:$bgcolor'>
<tbody>
<tr>
<td id='row1' value='".$row['id']."' name='moveid' style='display:none'>".$row['id']."</td>
<td value='".$row['PartNum']."' name='movepart'>".$row['PartNum']."</td>
<td value='".$row['ModelNum']."' name='movemodelnum'>".$row['ModelNum']."</td>
<td>".$row['Country']."</td>
<td>".$row['Region']."</td>
<td>".$row['Location']."</td>
<td>".$row['Placeid']."</td>
<td style='width:100px' value='".$row['UnitNum']."' name='moveunitnum'>".$row['UnitNum']."</td>
<td id='val' style='width:50px;' value='".$row['QTY']."' name='moveqty'>".$row['QTY']."</td>
<td value='0' type=text id='amt' name='moveamt'></td>
</tr>
</tbody>
</table>
</div>";
}
echo "<tr><td></td><td><input type='submit' class='submit' ></td></tr></form>";
}
}
?>
<script type="text/javascript">
function updatetable(){
$('#tablerun tr').each(function(){
var row_id = $(this).find("td:eq(1)").text();
var quantity = $(this).find("td:eq(8)").text();
var amt = $(this).find("input:eq(0)").val();
var data = {
id : row_id,
qty : quantity,
amt : amt
};
$.ajax({
type: "POST",
url: "update.php",
data: data,
success: function() {
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
});
};
</script>
update.php:
<?php
include_once 'includes/database.inc.php';
$id = $_POST['moveid'];
$qty = $_POST['moveqty'];
$amt = $_POST['moveamt'];
$sql = "UPDATE parts set QTY = $qty - $amt where id = $id";
mysqli_query($conn, $sql) or die(mysqli_error($conn));
?>
P.S. I realize that I should be using prepared statements I plan on implementing them once I have completed this task.
Any help is appreciated

How to insert multiple rows in php with two data is not in the table?

I have a problem inserting the multiple row from my table to my database. Ill show picture of my UI.
https://i.stack.imgur.com/1okJB.png
There are 5 column that I will insert into my database Barcode,Description and QTY is in the table that I want to insert and the two data is outside the table,or not on the table e.g username and customer_id. Its printed on the other part of my UI.
I tried this ajax code but nothing happen.
$(document).on('click','.Enter',function(e){
var user = [];
var product = [];
var customer = [];
var quantity = [];
$('input .user').each(function(){
user.push($(this).text());
});
$('tableData tr td .barcode').each(function(){
product.push($(this).text());
});
$('select .customer_id').each(function(){
customer.push($(this).text());
});
$('tableData tr td .qty').each(function(){
quantity.push($(this).text());
});
$.ajax({
url:"insert_sales.php",
method:"POST",
data:{user:user, product:product, customer:customer, quantity:quantity},
success: function(data){
alert(user[0]);
},
})
});
This is part of my HTML file.
<input type="hidden" name="user" value="<?php echo $row['username']; ?>" class="user" />
<select class="customer_id" name="customer" style='cursor:pointer'>
<?php
if(mysqli_num_rows($show)>0){
while ($row = mysqli_fetch_array($show)) {
?>
<option value="<?php echo $row['customer_id']; ?>"><?php echo $row['firstname'];?>
</option>
<table id="table2">
<thead>
<tr class='text-center'>
<th>Barcode</th>
<th>Description</th>
<th>Price</th>
<th>Unit</th>
<th>Qty</th>
<th>Sub.Total</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
This is my insert_product.php file.
if(isset($_POST['user'])){
$user = $_POST['user'];
$product = $_POST['products'];
$customer = $_POST['customer'];
$quantity = $_POST['quantity'];
$query = '';
for($count = 0; $count<count($user); $count++){
$user_clean = mysqli_real_escape_string($db, $user[$count]);
$product_clean = mysqli_real_escape_string($db, $user[$count]);
$customer_clean = mysqli_real_escape_string($db, $user[$count]);
$quantity_clean = mysqli_real_escape_string($db, $user[$count]);
if($user_clean != '' && $product_clean != '' && $customer_clean != '' && $quantity!= ''){
$query = "INSERT INTO sales(username,product_id,customer_id,quantity) VALUES('$user_clean',$product_clean,$customer_clean,$quantity_clean)";
}
}
if ($query != ''){
if(mysqli_multi_query($db,$query)){
echo "Item Inserted"
}else{
echo "Error";
}
}else{
echo "No Product";
}
}
Hope someone can help me about this one. I'd put an alert in ajax to know if the it passes to the code. There's no insert happening even though it passes to the alert.

Issue when when PHP is used to load data from custom Date-time picker for dc.js chart

The HTML page contains the form for selecting dates and loads with the visualization with all the data. After selecting the date, the visualization must be updated. But, in this case, it is loading again with the same full data instead of selected data. The javascript file is written separately which calls the PHP file to fetch data.
PHP code get_JSON.php to obtain data from the database.
<?php
include_once("connection.php");
$tablename = "button_timeint";
if ((isset($_POST['in1'])) && (isset($_POST['in1']))) {
$from_lbl = isset($_POST['in1']) ? $_POST['in1']:"";
$to_lbl = isset($_POST['in2']) ? $_POST['in2']:"";
$d1 = date_create($from_lbl);
$from = date_format($d1, 'YmdHis.u');
$d2 = date_create($to_lbl);
$to = date_format($d2, 'YmdHis.u');
$myquery = "SELECT * FROM button_timeint WHERE buttonID = 5 and date
BETWEEN '$from' AND '$to' ORDER BY DATE";
$query = mysqli_query($connection,$myquery);
if ( ! $query ) {
echo mysqli_error($connection);
die;
}
$data = array();
for ($x = 0; $x < mysqli_num_rows($query); $x++) {
$data[] = mysqli_fetch_assoc($query);
}
echo json_encode($data);
}
else{
$myquery = "SELECT * FROM button_timeint";
$query = mysqli_query($connection,$myquery);
if ( ! $query ) {
echo mysqli_error($connection);
die;
}
$data = array();
for ($x = 0; $x < mysqli_num_rows($query); $x++) {
$data[] = mysqli_fetch_assoc($query);
}
echo json_encode($data);
}
mysqli_close($server);
?>
The code line where PHP file is called in the javascript where d3 takes its input.
var dataSet_selected = "get_JSON.php";
d3.json(dataSet_selected, function(err,data){}
HTML form for the date time picker.
<form method="post">
<table>
<tr>
<td><label>From: </label></td>
<td><input type="datetime-local" name="in1"></td>
</tr>
<tr>
<td><label>To: </label></td>
<td><input type="datetime-local" name="in2"></td>
</tr>
<tr>
<td><input id ="submit_btn" type="submit" value="submit" ></td>
</tr>
</table>
</form>

How to post data to database in Jquery

Currently I have this jquery that helps me to get data from my database which only display the different types of option when this department is selected. But now I want to post this data to database again. is there any solution available? Here's my code:
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#cat").change(function() {
$.ajax({
type: "GET",
url: "getPositionTitle.php",
data: "category_id=" + $(this).find(":selected").val(),
cache: false,
success: function(msg){
$("#position_title").empty();
my_position_title_array = $.parseJSON(msg);
for (i = 0; i < my_position_title_array.length; i ++) {
$("#position_title").append('<option value="' + my_position_title_array[i].id + '">'
+ my_position_title_array[i].position_title + '</option>');
}
$("#position_title").trigger('change');
}
});
});
$("#cat").trigger('change');
});
</script>
<form id="offeredjob" method="post" action="doOfferedJob.php">
<tr>
<td><label for="applied_department">Department:</label></td>
<td>
<select id="cat" name ="applied_department" applied_position_title="category">
<?php
$query = "SELECT id, department FROM department";
$result = mysqli_query($link, $query) or die(mysqli_error());
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value ='" . $row['id'] . "'>" . $row['department'] . "</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td><label for = "applied_position_title">Position Title:</label></td>
<td>
<select id="position_title" applied_position_title="applied_position_title">
<option value="1"></option>
</select>
</td>
</tr>
And this is how I post to my database:
$query = "UPDATE job_application SET applied_department = '$applied_department', applied_position_title = '$applied_position_title' WHERE id = '$id'";
$result = mysqli_query($link, $query) or die(mysqli_error($link));
Add something like this to your JQuery.
// Post data to postPositionData.php when user changes form
$("#offeredjob").change(function() {
// Serialize form data
var yourFormData = $(this).serialize();
// POST
$.ajax({
type: "POST",
url: "postPositionData.php",
data: yourFormData,
success: function(msg){
// do something
}
});
});
File postPositionData.php would then do the database insert/update.

Categories