首页 > 解决方案 > 如何使用 Span 获取值并将其插入数据库?

问题描述


我正在尝试获取跨度的值,在选择一个项目后,总价格将变为跨度,我无法做到正确。我正在尝试使用 ajax,但我对它真的很陌生,我正在努力让它正确。当我尝试运行 e 时,它​​会显示未定义索引:总价格。如何正确获取 totalprice 的值?


尝试.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>

尝试.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';
}

标签: phpjqueryajax

解决方案


<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>

推荐阅读