如何将 bootstrap 模态内的动态数据发送到数据库中

Question

我有一个复选框列表。当我单击一个复选框时，会出现一个模式，其中包含来自数据库的相应数据。我已经这样做了。这是我的代码。

db.php

<?php  
    $servername = "localhost";
    $username = "root";
    $password = "";
    $db = "db";

    $conn = mysqli_connect($servername, $username, $password,$db);
    if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
    }
    echo "Connected successfully <br/>";
?>

student.php

<body>
    <form>
        <label>
            <input type="checkbox" value="1" name="name">
            Ann
        </label>
        <label>
            <input type="checkbox" value="2" name="name">
            Sam
        </label>
        <label>
            <input type="checkbox" value="3" name="name">
            Amaa
        </label>
    </form>

    <!--modal-->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" id="submit" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>

student.js

$(document).ready(function(){
    $("input[type=checkbox][name=name]").change(function(){
        if(this.checked) {    
            var value = $(this).val();
            $.ajax({
                url:"modal.php",
                type:"POST",
                data:{value:value},
                success:function(modalBody){
                    $("#myModal .modal-body").html(modalBody);
                    $("#myModal").modal('show');
                }
            });
        }
    });
});

modal.php

<?php
    if($_POST['value']){
        $test = $_POST['value'];
        include('db.php');

        $sql = "SELECT subject FROM grade where name=".$value." ";
        $res = mysqli_query($conn,$sql);
        while($row = mysqli_fetch_assoc($res)){
            echo "<input type='checkbox' name='subject[]' value='".$row['subject']."'>".$row['subject'];
            echo "<br>";   
        }
    }
?>

我的问题是如何将模式上选中的复选框值发送到数据库中？这是我尝试过的方法。

new.js

$(document).ready(function(){
    $("input[type=checkbox][name=name]").change(function(){
        if(this.checked) {
            var value = $(this).val();
            $.ajax({
                url:"modal.php",
                type:"POST",
                data:{test:value},
                success:function(modalBody){
                    $("#myModal .modal-body").html(modalBody);
                    $("#myModal").modal('show');
                }
            });
        }
    });

    $('#myModal submit').on('submit',function(){
        var insert = [];
        $('input[name=category[]]').each(function(){
            if($(this).is(":checked")) {
                insert.push($(this).val());
            }
        });
        insert = insert.toString();
        $.ajax({
            url: "insert.php",
            method: "POST",
            data:{insert:insert},
            success:function(data){
                $('#result').html(data);
            }
        });
    });
});

insert.php

<?php
    if(isset($_POST["insert"])) {
        include ('db.php');
        $query = "INSERT INTO name_list(student_name) VALUES ('".$_POST["insert"]."')";
        $result= mysqli_query($conn, $query);
        echo "Data Inserted Successfully!";
    }
?>

我尝试了很多。每次 name_list table 都没有值。你能帮我解决这个问题吗？我想再次将模态上选定的复选框值发送到数据库中。低于值。

echo "<input type='checkbox' name='subject[]' value='".$row['subject']."'>"

Answer 1

首先，如果有多个同名的复选框，则名称必须是一个数组，如：

<form>
   <input type="checkbox" name="bla[]" value="1" />
   <input type="checkbox" name="bla[]" value="2" />
</form>

现在您可以在 jquery 中获得价值，例如：

$(document).ready( function () {    
    $("input[name='bla[]']").each( function () {
    if($(this).is(':checked'))
    {
        alert($(this).val());
        // put this value in an array
    }
    });
});

Working Fiddle

如何将 bootstrap 模态内的动态数据发送到数据库中

How to send dynamic data inside the bootstrap modal into database

php

jquery

checkboxlist

bootstrap-modal