如何使用 php、jquery 和 ajax 在数据库中插入值

Question

---

I am struggling very hard to get this to work and I don't know what I'm doing wrong. I am new into this so be gentle, I have the index that let the user pick item and show the total price. I want to insert the totalprice into my database with jQuery and AJAX. but when I tried to submit it to it say Undefined index: total

---

index.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'] . ' cpuname=' . $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'] . '" gpuname = "' . $obj['gpuname'] . '">' . $obj['gpuname'] . '</option>';
                }
                echo '</select>';
                ?>
            </td>
            <td>
                <output class="form-control prc" id="gpuprice" disabled value="">
            </td>
        </tr>
    </tbody>

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

            </td>
            <td>
                <span class="totalprice" name="total">Total: </span>
                <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)
                        var totalp
                        var total = parseInt(cpu_price) + parseInt(gpu_price);
                        $('.totalprice').text('₱' + total);
                    })
                </script>
            </td>
        </tr>
    </tbody>
    <script>
        $("#totalp").on("submit", function(event) {
            event.preventDefault();
            $.ajax({
                type: "GET",
                url: "insert.php",
                data: {
                    'total':total
                },
                dataType: "json",
                success: function(data) {

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

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

---

insert.php

    $total= $_GET['total'];

echo $total;
$conn = mysqli_connect("localhost", "root", "", "pcpart");
// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sqtr = "INSERT INTO trycombuild(totalprice) VALUE ('$total')";
mysqli_query($conn,$qstr);
mysqli_close($conn);
echo "successful";

Answer 1

you can set variable total in tab ' input type ="hidden" id="total " ' after in jquery insert to ajax, you can get value total in tab input and send ajax.