Question

我想做PG预订，我在该领域有一个表单字段（index.php）我选择房间共享，如1分享或2分享等...选择此pg分享后我传递了下一页的值（ pg_deatils.php）通过AJAX和我从DB选择哪个房间有1个共享或2个共享后我返回index.php中的值仍然我得到正确之后我想要在html中追加值，房间1，Romm 2 ...我想要附加console.log（value.pg_id）; // 2,1并且输入Bed 1，Bed1的值...我想附加console.log（value.room_number）; // room1 ，房间2

function showDiv(toggle){
  var sharing=$("#sharing").val();
  $.ajax({
    type: "POST",
    url: "pg_details.php",
    data: "sharing_id="+sharing,
    success: function(data) {
      var res =jQuery.parseJSON(data);
      console.log(res);
      if(res['return'] == 1){
        var htmlString=''; 
        $.each( res['data'], function( key, value ){
          console.log(value.pg_id);// 2,1
          console.log(value.room_number);//room1,room2
        });
      }
    }
  });
}

<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-6">
    <h3 style="text-align:center;color:white; margin-top:70px;padding-bottom:30px;">PG Booking System</h3>
    <form class="form-horizontal" >							
      <div class="form-group">
        <label class="control-label col-sm-2" for="phone">Sharing:</label>
        <div class="col-sm-10">
          <select class="form-control" name="sharing" id="sharing">
            <option value="">---select---</option>
          </select>
        </div>
      </div>

      <div class="form-group" style="margin-top:30px;">
        <div class="col-sm-offset-5 col-sm-8">
          <button type="button" class="btn btn-primary" name="answer" onclick="showDiv('toggle')" style=" margin-top:50px;margin-bottom:50px;">Submit</button>
        </div>
      </div>
    </form>  
  </div>
  <div class="col-md-3"></div>
</div>	


<!--This HTML i want to append-->

<div id="toggle" style="display:none">
  <div class="container" style=" margin-bottom: 30px;">
    <div class="row">
      <h4 style="margin-left:15px;">PG NAME 1</h4>
      <div class="col-sm-10">
        <div class="btn-group" id="btnmar">
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px; ">Bed 1</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 2</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px; ">Bed 3</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px; ">Bed 4</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 5</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px; ">Bed 6</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 7</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 8</button>
          </a>
        </div>
      </div>

      <!--hidden 6 end-->
      <!--hidden 4 start-->
      <div class="col-sm-2">
        <div class="panel-group">
          <div class="panel panel-primary">
            <div class="panel-heading"> Premium Facility</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-television" aria-hidden="true" style="margin-right:15px;"></i>T.V.</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-wifi" aria-hidden="true" style="margin-right:15px;"></i>Wifi</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-bed" aria-hidden="true" style="margin-right:15px;"></i>Bed</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-shopping-basket" aria-hidden="true" style="margin-right:15px;"></i>Washing Machine</div>
          </div>
        </div>
      </div>
      <!--hidden 4 end-->
    </div>
    <!--row1 end-->
    <!--row2 start-->
    <div class="row">
      <h4 style="margin-left:15px;">PG NAME 2</h4>
      <div class="col-sm-10">
        <div class="btn-group" id="btnmar">
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 1</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 2</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 3</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 4</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 5</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 6</button>
          </a>
        </div>
      </div>

      <!--hidden 6 end-->
      <!--hidden 4 start-->
      <div class="col-sm-2">
        <div class="panel-group">
          <div class="panel panel-primary">
            <div class="panel-heading"> Classic Facility</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-television" aria-hidden="true" style="margin-right:15px;"></i>T.V.</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-wifi" aria-hidden="true" style="margin-right:15px;"></i>Wifi</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-bed" aria-hidden="true" style="margin-right:15px;"></i>Bed</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-shopping-basket" aria-hidden="true" style="margin-right:15px;"></i>Washing Machine</div>
          </div>
        </div>
      </div>
      <!--hidden 4 end-->
    </div>
    <!--row2 end-->
    <!--row2 start-->
    <div class="row">
      <h4 style="margin-left:15px;">PG NAME 3</h4>
      <div class="col-sm-10">
        <div class="btn-group" id="btnmar">
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 1</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 2</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 3</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 4</button>
          </a>
          <a href="register.php">
            <button type="button" class="btn btn-primary" style=" width: 71px;">Bed 5</button>
          </a>
        </div>
      </div>

      <!--hidden 6 end-->
      <!--hidden 4 start-->
      <div class="col-sm-2">
        <div class="panel-group">
          <div class="panel panel-primary">
            <div class="panel-heading"> Basic Facility</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-television" aria-hidden="true" style="margin-right:15px;"></i>T.V.</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-wifi" aria-hidden="true" style="margin-right:15px;"></i>Wifi</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-bed" aria-hidden="true" style="margin-right:15px;"></i>Bed</div>
            <div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-shopping-basket" aria-hidden="true" style="margin-right:15px;"></i>Washing Machine</div>
          </div>
        </div>
      </div>
      <!--hidden 4 end-->
    </div>
    <!--row3 end-->
  </div>
</div>

pg_details.php

<?php
  include_once("admin/config.php");
  include("functions.php");
  //$pg_name=Getpg($_POST['pg_id']);
  $sharing=$_POST['sharing_id'];//Getting Sharing Value

  $sql=mysql_query("SELECT * FROM rooms WHERE room_sharing='$sharing'");
  $count = mysql_num_rows($sql);
  if($count > 0){
    while($row=mysql_fetch_assoc($sql)){
      $data[]= $row;
    }
    $pg_type= array("return"=>1,"count" =>$count,"data" =>$data);
    echo $pg_type = json_encode($pg_type);
  }else{
    $pg_type= array("return"=>0,"count" =>0,"data" =>"");
    echo $pg_type = json_encode($pg_type);
  }
?>

Answer 1

我从数据库表中假设了某些数据并创建了它。你必须根据你的数据调整一下才能得到它。

            <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <h3 style="text-align:center;color:white; margin-top:70px;padding-bottom:30px;">PG Booking System</h3>
                <form class="form-horizontal" >

                        <div class="form-group">
                          <label class="control-label col-sm-2" for="phone">Sharing:</label>
                          <div class="col-sm-10">
                             <select class="form-control" name="sharing" id="sharing">
                         <option value="">---select---</option>
                                                     <!--   <?php 
                            $sql = "SELECT * FROM sharing";
                            $result = mysql_query($sql);
                            while($row = mysql_fetch_array($result))
                            {
                            echo '<option value="'.$row["id"].'">'.$row["sharing_type"].'</option>';
                            }
                            ?>-->
                                                            <option value='1'>one</option>
                                                            <option value='2'>two</option>
                                                            <option value='3'>three</option>
                        </select>
                          </div>
                        </div>

                        <div class="form-group" style="margin-top:30px;">
                          <div class="col-sm-offset-5 col-sm-8">
                            <button type="button" class="btn btn-primary" name="answer" onclick="showDiv('toggle')" style=" margin-top:50px;margin-bottom:50px;">Submit</button>
                          </div>
                        </div>
                    </form>  
    </div>
    <div class="col-md-3"></div>
</div>  


    //////This HTML i want to append

<div id="toggle" style="display:none">
<div class="container" id='pgDetails' style=" margin-bottom: 30px;">

</div>
    </div>        





        <script>

        function showDiv(toggle){
        var sharing=$("#sharing").val();
        $.ajax({
                     type: "POST",
                         url: "pg_details.php",
                     data: "sharing_id="+sharing,
                         success: function(data) {
                         var res =jQuery.parseJSON(data);
                         console.log(res);
                         if(res['return'] == 1){
                                    $( "#toggle" ).show();
                                   var htmlString=''; 
                                   $.each( res['data'], function( key, value ){
                                        console.log(value.pg_id);// 2,1
                                        console.log(value.room_number);//room1,room2

                                        var htmlString = '<div class="row">\n\
                                                          <h4 style="margin-left:15px;">' + value.pg_name +'</h4>\n';

                                        htmlString += '<div class="col-sm-10"> <div class="btn-group" id="btnmar">\n ';
                                        for(var i=1; i<value.beds+1; i++) {
                                            htmlString += '<a href="register.php"><button  type="button" class="btn btn-primary" style=" width: 71px; ">Bed ' + i + '</button></a>\n';
                                        }
                                        htmlString += '</div>\n</div>\n';

                                        htmlString += '<div class="col-sm-2">\n\
                                                        <div class="panel-group">\n\
                                                                <div class="panel panel-primary">\n\
                                                                  <div class="panel-heading"> Premium Facility</div>\n';
                                        var facArr = value.facility.split(',');

                                        for(var i=0; i<facArr.length; i++) {
                                            htmlString += '<div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-television" aria-hidden="true" style="margin-right:15px;"></i>' + facArr[i] +'</div>';
                                        }

                                        htmlString += '</div>  </div>        </div>   </div>';

                                        $('#pgDetails').append(htmlString);


                                });

                        }
                        else {
                            $( "#toggle" ).hide();
                        }
                     }
                  });
        }
        </script>

pg_details.php

    <?php
//include_once("admin/config.php");
//include("functions.php");
////$pg_name=Getpg($_POST['pg_id']);
//$sharing=$_POST['sharing_id'];//Getting Sharing Value
//
//$sql=mysql_query("SELECT * FROM rooms WHERE room_sharing='$sharing'");
//$count = mysql_num_rows($sql);
//if($count > 0){
//  while($row=mysql_fetch_assoc($sql)){
//  $data[]= $row;
//  }
//  $pg_type= array("return"=>1,"count" =>$count,"data" =>$data);
//    echo $pg_type = json_encode($pg_type);
//}else{
//  $pg_type= array("return"=>0,"count" =>0,"data" =>"");
//    echo $pg_type = json_encode($pg_type);
//}
//
    $row["pg_id"] = 1;
    $row["room_number"] = 102;
    $row["pg_name"] = "PG Name 1";
    $row["beds"] = 4;
    $row["facility"] = "T.V, WiFi, Bed, Washing Machine";
    $data[] = $row;

    $row["pg_id"] = 1;
    $row["room_number"] = 502;
    $row["pg_name"] = "PG Name 2";
    $row["beds"] = 7;
    $row["facility"] = "T.V, WiFi, Bed";

    $data[] = $row;
    $pg_type= array("return"=>1,"count" =>1,"data" =>$data);
    echo $pg_type = json_encode($pg_type);
?>

如何在forloop和jquery HTML中附加值

1 个答案: