How can i get the value of Span using and insert it to Database?

Question

---

I'm trying to get the value of span, after selecting an item the total price will go to span and I cant get it right. I'm trying to use ajax but I'm really new to it I'm struggling to get it right. when I'm trying to run e it will say Undefined index: totalprice. How can i get the value of totalprice correctly?

---

try.php

        <thead>
            <tr>
                <th>Component</th>
                <th>Item Name</th>
                <th>Price </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>CPU</td>
                <td>
                    <?php
                    //Retrieving CPU table
                    $query = $conn->query("SELECT * FROM cpu");
                    echo '<select name="cpu" class="cpu"  onChange = $("#cpuprice").val($(this).find("option:selected").attr("cpuprice"))>';
                    echo '<option></option>';
                    while ($obj = mysqli_fetch_assoc($query)) {
                        echo '<option cpuprice = ' . $obj['price'] . ' value=' . $obj['cpuname'] . ' >' . $obj['cpuname'] . '</option> /n';
                    }
                    echo '</select>';
                    ?>
                </td>
                <td>
                    <output id="cpuprice" disabled value="">
                </td>
            </tr>
        </tbody>

        <tbody>
            <tr>
                <td>GPU</td>
                <td>
                    <?php
                    //Retrieving GPU table
                    $query = $conn->query("SELECT * FROM gpu");
                    echo '<select name="gpu" class ="gpu"  onChange = $("#gpuprice").val($(this).find("option:selected").attr("gpuprice"))>';
                    echo '<option></option>';
                    while ($obj = mysqli_fetch_assoc($query)) {
                        echo '<option  gpuprice = "' . $obj['price'] . '" value = "' . $obj['gpuname'] . '">' . $obj['gpuname'] . '</option>';
                    }
                    echo '</select>';
                    ?>
                </td>
                <td>
                    <output id="gpuprice" disabled value="">
                </td>
            </tr>
        </tbody>

        <tbody>
            <tr>
                <td>CPU COOLER</td>
                <td>
                    <?php
                    //Retrieving CPU Cooler table
                    $query = $conn->query("SELECT * FROM cpucooler");
                    echo '<select name = cpuc class = cpuc  onChange = $("#cpucprice").val($(this).find("option:selected").attr("cpucprice"))>';
                    echo '<option></option>';
                    while ($obj = mysqli_fetch_assoc($query)) {
                        echo '<option  cpucprice = "' . $obj['price'] . '" value = "' . $obj['cpucname'] . '" >' . $obj['cpucname'] . '</option>';
                    }
                    echo '</select>';
                    ?>
                </td>
                <td>
                    <output id="cpucprice" disabled value="">
                </td>
            </tr>
        </tbody>

        <tbody>
            <tr>
                <td>
                </td>
                <td>

                </td>
                <td>
                    <span class="totalprice" name="total" Value="">

                        <script>
                            $('select').change(function() {
                                //get value from cpu slect box check if attr there else take value 0
                                var cpu_price = $(".cpu").find('option:selected').attr('cpuprice') ? $(".cpu").find('option:selected').attr('cpuprice') : 0
                                $('#cpuprice').val(cpu_price)

                                //get value from gpu slect box check if attr there else take value 0
                                var gpu_price = $(".gpu").find('option:selected').attr('gpuprice') ? $(".gpu").find('option:selected').attr('gpuprice') : 0
                                $('#gpuprice').val(gpu_price)

                                //get value from cpucooler slect box check if attr there else take value 0
                                var cpuc_price = $(".cpuc").find('option:selected').attr('cpucprice') ? $(".cpuc").find('option:selected').attr('cpucprice') : 0
                                $('#cpucprice').val(cpuc_price)

                                var total = parseInt(cpu_price) + parseInt(gpu_price) + parseInt(cpuc_price);
                                $('.totalprice').text('₱' + total);
                            })
                        </script>
                </td>
            </tr>
        </tbody>
        <script>
            $("#total").on("submit", function(event) {
                event.preventDefault();
                $.ajax({
                    type: "GET",
                    url: "trying.php",
                    data: {
                        'totalprice': totalprice
                    },
                    dataType: "json",
                    success: function(data) {

                    },
                });
            });
        </script>
    </table>

    <input class="submit" type="submit" />
</form>

---

trying.php

    <?php

if (isset($_GET['cpu']) !== '' && isset($_GET['gpu']) !== '' && isset($_GET['gpuc']) !== '' && isset($_GET['total']) !== '' && isset($_GET['totalprice']) !== '') {
    $cpu = $_GET['cpu'];
    $gpu = $_GET['gpu'];
    $cpuc = $_GET['cpuc'];
    $total = ($_GET['totalprice']);


    $conn = mysqli_connect("localhost", "root", "", "userregistration");
    // Check connection
    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }


    $qstr = $conn->prepare("INSERT INTO trycombuild (cpuname,gpuname,cpucname,total) VALUES (?,?,?,?)");
    $qstr->bind_param("ssss", $cpu, $gpu, $cpuc, $total);
    $qstr->execute();
    $qstr->close();
    echo 'succesfull';
} else {
    echo 'error';
}

Answer 1

<span class="totalprice" name="total"></span>

Remove value tag from span and also change this javascript line

$('.totalprice').text('₱' + total);

to

$('.totalprice').html('₱' + total);

And change the ajax call like this:

<script>
            $("#total").on("submit", function(event) {
                event.preventDefault();
                $.ajax({
                    type: "GET",
                    url: "trying.php",
                    data: {
                        'totalprice': $('.totalprice').html()
                    },
                    dataType: "json",
                    success: function(data) {

                    },
                });
            });
        </script>