CODEWITHSUNDEEP
javascriptphpjson
Matt Drake
Matt Drake

Reputation: 156

Multiple ajax returns and sum values

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?

Upvotes: 0

Views: 543

Answers (1)

Don&#39;t Panic
Don&#39;t Panic

Reputation: 14520

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();

Upvotes: 1

Related Questions