PHP多选 - 使用ajax发送选项数据

时间:2016-10-19 22:28:20

标签: php jquery ajax select

我想通过选择下拉字段更改数据库中的状态。 我发送的是ajax。第一行总是有效,但是有多个数据我不能更新第二行,第三行......等等

我尝试使用serialize(),但它没有用。

从数据库中选择:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
<script type="text/javascript">
    $(document).ready(function(){
        $(".allbooks").change(function(){
            var allbooks = $(this).val();
            var dataString = "allbooks="+allbooks;
            $.ajax({
                type: "POST",
                data: dataString,
                url: "get-data.php",
                success: function(result){
                    $("#show").html(result);
                }
            });

        });
    });
</script>

</head>
<body>
 <?php
    define("HOST","localhost");
    define("USER","root");
    define("PASSWORD","");
    define("DATABASE","hotel");
    $euConn = mysqli_connect(HOST, USER, PASSWORD, DATABASE);

  $selectRooms = "SELECT * FROM proba WHERE status='inRoom'";
   $resultRooms = mysqli_query($euConn,$selectRooms);
     if (mysqli_num_rows($resultRooms) > 0) {
    echo "<div id='reserved' align='center'>";
   While ($row = mysqli_fetch_array($resultRooms)) {
    echo $row[1];
    echo $row[0];
?>

<select name="allbooks" id="allbooks">
<option name="years">Choose</option>
<?php

for($i=1; $i<=19; $i++)
{
    echo "<option value=".$i.">".$i."</option>";
}
?>
 </select><br />

<?php }

 }

else
echo "<h4>nothing in the db</h4></div>";
?>
<div id="show">
</div>
</body>
</html>

并获得结果:

if(!empty($_POST["allbooks"])) {
var_dump($_POST);
    $id = 2;
    //echo $_POST['modelS'];
    $room = $_POST['allbooks'];
    $sql2 = "UPDATE proba SET room='$room' WHERE id_reservation='$id'";
    $query = mysqli_query($euConn, $sql2);
var_dump($query);
}

如何改变,或者什么是简单的解决方案?谢谢你的帮助。

1 个答案:

答案 0 :(得分:1)

在呈现的页面上有多个select元素,标识为allbooks这是错误的,ID必须是唯一的。您需要将这些更改为类并使用$(".allbooks").change(function(){ ....

至于使用更新将行ID发送到服务器,您需要先将行ID添加到选择框中,以便稍后检索它,类似'<select name="allbooks" class="allbooks" data-row-id="' . $row['id_reservation'] . '">就可以了。

我还建议将工作分成几个函数来更好地组织代码(类会更好)

如果没有访问数据库就很难测试,但这应该适合你。请注意,我在同一页面上有更新功能,并将ajax url属性更新为'',这会将数据发送到当前页面的新实例以处理更新。

<?php
require_once ("db_config.php");


function updateRoom($euConn, $newRoomVal, $id)
{
    $stmt = $euConn->prepare("UPDATE proba SET room=? WHERE id_reservation=?");
    $stmt->bind_param('ii', $newRoomVal, $id);
    /* execute prepared statement */
    $stmt->execute();
    /* close statement and connection */
    $affectedRows = mysqli_stmt_affected_rows($stmt) > 0;
    $stmt->close();
    return $affectedRows;
}
function getRooms($euConn)
{
    $selectRooms = "SELECT * FROM proba WHERE status='inRoom'";
    $resultRooms = mysqli_query($euConn,$selectRooms);
    $rows = mysqli_fetch_all($resultRooms,MYSQLI_ASSOC);
    return count($rows) < 1 ? '<h4>nothing in the db</h4></div>' : createSections($rows);
}

function createSections($rows)
{
    $sections = [];
    foreach( $rows as $row){
        $options = [];
        for ($i = 1; $i <= 19; $i++)
            $options[] = "<option value=" . $i . ">" . $i . "</option>";
        $options = implode('', $options);
        $select = '<select name="allbooks" class="allbooks" data-row-id="' . $row['id_reservation'] . '"><option value="">Choose</option>' . $options . '</select><br/>';
        // .. build all your other row elements here....
        $section = 'some other compiled html'.$select;
        $sections[]=$section;
    }
    return implode('', $sections);
}

$euConn = mysqli_connect(HOST, USER, PASSWORD, DATABASE); 

if(isset($_POST["allbooks"]) && $_POST["allbooks"] !='') {
    $updated = updateRoom($euConn,$_POST["allbooks"],$_POST["rowId"] );
    echo json_encode(['success'=>$updated]);
    exit;
}

$pageSections = getRooms($euConn);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".allbooks").change(function(){
                var $this = $(this);
                var allbooks = $this.val();
                var rowId = $this.data('row-id');
                var dataString = "allbooks="+allbooks+'&rowId='+rowId;
                $.ajax({
                    type: "POST",
                    data: dataString,
                    url: "",
                    success: function(result){
                        $("#show").html(result);
                    }
                });

            });
        });
    </script>
</head>
<body>

<div id='reserved' align='center'>
<?php echo $pageSections ?>
<div id="show">
</div>
</body>
</html>