1. дома
  2. Вопрос и ответ
  3. Как добавить значение в forloop и jquery HTML

Как добавить значение в forloop и jquery HTML

2016-09-28 2 views
0

Я хочу сделать бронирование PG, у меня есть одно поле формы в этом поле (index.php). Я выбираю разделение комнаты, как 1 совместное использование или 2 обмена и т. Д. После выбора этого pg sharing i передал значение на следующей странице (pg_deatils.php) через AJAX, и я выбираю из DB, в котором есть 1 общий доступ или 2 обмена после того, как я вернул значение в index.php, но я получаю правильный после этого, я хочу добавить значение в html, введите номер 1, Romm 2 ... я хочу добавить значение console.log (value.pg_id); // 2,1 и установить Bed 1, Bed1 ... я хочу добавить консоль. журнал (value.room_number); // room1, room2Как добавить значение в forloop и jquery HTML

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" > \t \t \t \t \t \t \t 
 
     <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> \t 
 

 

 
<!--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); 
    } 
?>

источник

2016-09-28 Mani M

ответ

0

Я предположил, некоторые данные из таблицы базы данных и создал это. Вам придется немного изменить все, чтобы получить его в соответствии с вашими данными.

  <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); 
?>

источник

2016-09-28 07:49:50

Смежные вопросы

 Смежные вопросы