PHP未將隱藏輸入字段的值輸入數據庫

Question

我有一個具有自定義選擇菜單的網站，該菜單使用jQuery將選定的值傳遞給該字段。 然后，PHP獲取隱藏輸入字段的值，並且應該將值插入數據庫中。 但是，這沒有發生，我不確定為什么。 誰能解釋為什么會這樣？

形成

<form id="scenario_builder" method="post">
    <fieldset for="center">
        <label>Center:</label>
        <div class="select" name="center_menu" id="center_menu">
            <div class="arrow"></div>
            <div class="option-menu">
                <?php
                    $query = "SELECT * FROM $centers";
                    $result = mysqli_query($connect, $query);
                    while($row = mysqli_fetch_assoc($result)){
                        $center_name = "{$row['center']}";
                        echo "<div class='option'>" .$center_name ."</div>";
                    }
                ?>
            </div>
        </div>
    </fieldset>
    <input type="submit" name="save" id="save" class="button" value="Save" />
</form>

表格處理

ob_start();
if($_SERVER["REQUEST_METHOD"] == "POST"){
    $center = $_POST["center"];
    $query = "INSERT INTO `$scenarios`(`id`) VALUES('" .$center ."')";
    mysqli_query($connect, $query);
}
ob_clean();
echo json_encode(array("success" => 1));

JQUERY選擇菜單

function select_menu(){
    var select = $(".select");
    var option_menu = $(".option-menu");
    var option = $(".option");
    select.on("click", function(){
        $(this).find(option_menu).toggle();
        select = $(this);
        $(this).find(option_menu).each(function(){
            $(".current").hide();
            if($(this).hasClass("current")){
                $(this).removeClass("current");
            }
            else{
                $(this).show().addClass("current");
            }
        })
    })

    option.on("click", function(){
        select.children("p").remove();
        var value = $(this).text();
        select.prepend("<p><input type='hidden' name='center' id='center' value='" +value +"' />" +value +"</p>");
        console.log(value);
    })

    $(document).on("click", function(ev){
        if($(ev.target).closest(".select").length === 0){
            $(".current").hide().removeClass("current");
        }
    })
}
select_menu();

JQUERY事件處理程序

$("input[id='save']").on("click", function(){
        $.post("..php/processing.php", {}, function(response){
            if(response.success == "1"){
                console.log("Data entered.");
            }
            else{
                console.log("Data not entered.");
            }
        }, "json");
    })

Answer 1

您的主要問題是，您需要使用$.post的data參數提供要發送的數據

您可以使用serialize()獲取表單的所有數據。 使用ajax時，您還需要避免瀏覽器默認的提交過程，否則表單也將正常提交

它通常是更好地結合everyhting到submit表單的事件。

$('#scenario_builder').submit(function(event){
    /* prevent default submit*/
     event.preventDefault();
     /* do ajax "this" is the form element*/
     $.post("..php/processing.php", $(this).serialize(), function(response){
            if(response.success == "1"){
                console.log("Data entered.");
            }
            else{
                console.log("Data not entered.");
            }
        }, "json");           
});