用ajax和php保存来自多个复选框和其他控件的数据


saving data from multiple check boxes and other controls with ajax and php

我在从复选框中保存数据时遇到了麻烦。我已经尝试了很多方法,但我没有得到的结果是否有人可以帮助我的情况下?这是我的主页。

    <!DOCTYPE html>
<html>
<head>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Loading data into Bootstrap Framework Modal</title>
</head>
<body>
    <a class="showMathQuestions btn btn-warning btn-sm" data-toggle="modal" data-target="#myModal">Math</a>
    <a class="showAlsanaQuestions btn btn-warning btn-sm" data-toggle="modal" data-target="#myModal">Dari</a>
    <a >Pashto</a>
    <a >Geometry</a>
    <a >History</a> 
<div class="modal fade" id="myModal" tabsindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Select Questions</h4>
        </div>
            <div class="modal-body">
                    <div class="form-group">
                        <div id="viewdata">
                        </div>
                    </div>
        <div class="modal-footer">
            <button type="button"  class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" onclick="submitForm()" id="save" class="btn btn-primary">Save Changes</button>
        </div>
        </div>
    </div>
</div>
<div id="info"></div>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script>
        $('.showMathQuestions').on('click' , function() {
            $.ajax({
                type: "GET",
                url: "getMathQuestionsForModal.php"
            }).done(function(data)
            {
                $('#viewdata').html(data);
            });
        }); 
     </script>
</body>
</html>

这是我的模式,我检索数据..

<form name="form1" method="POST" action="" id="form1">
        <label for="date">Date</label>
                                <input type="text" class="form-control" value="" id="date" />
                            </div>
                            <div class="from-group">
                                <label for="number">Number</label>
                                <input type="text" class="form-control" id="number" />
                            </div>
                            <div><br /></div>
        <table class="table table-bordered table-hover" >
        <thead>
            <tr>
                <th>Question ID</th>
                <th>Question</th>
                <th>Answers</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
    <?php
        //Require Connection to do attractioin with database
        require('connection.php');
        //writing query and storing in query variable
        $query = "SELECT question.q_id, question.qps, answers.q_id, answers.ps1, answers.ps2, answers.ps3, answers.ps4 FROM question,answers WHERE Subject = 'ریاضیات' and question.q_id = answers.q_id";
        $executeQuery = $mysqli->query($query);
        while ($row = $executeQuery->fetch_object()) {
    ?>
            <tr>
                <td width="10%"><input style="width: 80px; background-color: #FFFFFF; border-style:none;" name="question_id" value="<?php echo $row->q_id; ?>" disabled /></td>
                <td width="60%"><textarea style="background-color: #eeeeee; border-style:none;" disabled ><?php echo $row->qps; ?></textarea></td>
                <td width="20%">
                    <div class="col-md-2">الف: <?php echo $row->ps1; ?></div>
                    <div class="col-md-2">ب: <?php echo $row->ps2; ?></div>
                    <div class="col-md-2">ج: <?php echo $row->ps3; ?></div>
                    <div class="col-md-2">د: <?php echo $row->ps4; ?></div>
                </td>
                <td width="20%">
                    <input type="checkbox" name="question[]" id="question" value="<?php echo $row->qps; ?>" />
                    <label for="check">Select</label>
                </td> 
            </tr>
    <?php 
        }
    ?>
        </tbody>
    </table>
</form>

再次检索数据后,我想将选中复选框的数据存储在数据库的另一个表中,该表是小册子。我试了这两种方法。

<script>
    function submitForm(){
          var question = new Array();
          $("input.checked").each(function() {
            data['question[]'].push($(this).val());
          });
          $.ajax({
            type: "POST",
            url: "saveBookletData.php",
            data : {date:$("#date").val(),
                    number:$("#number").val(),
                    question:question },
            success: function(data){
                $('#info').html(data);
            }
          });
          return false;
    }
</script> 

<script>
    function submitForm(){
        var form = document.form1;
        var dataString = $(form).serialize();
        $.ajax({
            type: 'POST',
            url: 'saveBookletData.php',
            data: dataString,
            success: function(data){
                $('#info').html(data);
            }
        });
        return false;
    }
</script>

,这是我的saveBookletData php代码。

<?php
    include "connection.php";
    if(isset($_POST['question'])){
        $date = $_POST['date'];
        $number = $_POST['number'];
        $question = $_POST['question'];
        foreach ($quesion as $key => $value) {
            $query = "insert into booklet (datas, bookletNumber, questions) values ('".$date."', '".$number."', '".$value."')";
            if($mysqli->query($query)){
                echo "<script>alert('Booklet Data has been saved');</script>";
            }else{
                echo "<script>alert('Booklet Data not saved');</script>";
            }
        }
    }
?>

,但这两个方法不会沿着选定的复选框在数据库中保存数据。在这种情况下,有人能帮助我吗?我将非常感谢你的帮助。

您在查询中使用的是insertkj而不是insert。也可以尝试使用Chrome开发者工具或Firebug调试AJAX请求。