如何使用 Span 获取值并将其插入到数据库中？

问题描述

---

我正在尝试获取跨度的值，在选择一个项目后，总价格将达到跨度，但我无法正确计算。我正在尝试使用 ajax，但我真的很陌生，我正在努力让它正确。当我尝试运行 e 时，它​​会说 Undefined index: totalprice。如何正确获取totalprice的值？

---

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';
}

解决方法

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

从 span 中删除 value 标记并更改此 javascript 行

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

到

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

并像这样更改ajax调用：

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

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