PHP未将隐藏输入字段的值输入数据库

Question

I've got a site that has a custom select menu which uses jQuery to pass the selected value into the field. PHP then gets the value of the hidden input field and, should, insert the value into a database. However, this isn't happening and I'm not sure why. Can anyone explain why this is happening?

FORM

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

FORM PROCESSING

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

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

$("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

Your main issue is that you need to provide data to send using the data argument for $.post

You can use serialize() to get all data for a form. You also need to revent the browser default submit process when using ajax or the form will submit normally also

It is generally better to bind everyhting to the submit event of the form.

$('#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");           
});