I want to get the information from this formwhen you press the add to cart button. and i want to use that information in a cart page.
<?php
$result = mysqli_query($conn,$query);
$output = '';
while($row = mysqli_fetch_assoc($result)) {
$output .= '
<div style="margin-bottom: 20px;" class="col-lg-3 col-md-6 col-sm-6">
<form method="post ">
<div style="height: 400px;" class="card shadow text-center">
<div class="card-block shop-item">
<img class="shop-item-image" src="Bilder/clothes/'. $row['ProductImage'].'" alt="" class="img-fluid" style="height: 200px;">
<div class="card-text shop-item-title">
'.$row['Brand'].'
</div>
<div class="card-text">
'.$row['Quantity'].' in stock
</div>
<div class="shop-item-details">
<div class="card-text" shop-item-price>
<h3>£ '.$row['Price'].'</h3>
</div>
<input style="width: 80%; margin-left: 10%; " type="text" name="quantity" class="form-control" value="1"/>
<button style="margin-top: 10px; margin-bottom: 10px; background-color:#FB8122; border: none; color:black;"href="#" class="shop-item-button btn btn-primary ">Add to cart <span class="fas fa-cart-arrow-down"></span></button>
</div>
</div>
</div>
</form>
</div>;';
}
echo $output;
}
?>
First time asking so sorry if I did something wrong
Related
This is a form to create a new scorecard.. When I click on add new objective button. A new objective is added. My problem comes when I want to add new kpi in the second or other objectives apart from the firt one, the kpi is added in the first objective and also it adds the whole scorecard form instead of only one objective per click.This image shows how the kpi is added.
Here is my scorecard code
<form id="form" action='/scorecard'>
<div class="class" id="objectives_place">
<div class="row col-md-10 col-md-offset-1" >
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="name">Name</label>
<input id="scoreCardName" name="scoreCardName" value="{{ $scorecard['name'] }}" style="height: 40px;" type="text" class="form-control" placeholder="score card name" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="name">Employee</label>
<select name="employeeid" id="employeeid" class="form-control" style="height: 40px;">
<option value="">choose employee</option>
#foreach($employees as $employee)
<option value="{{$employee->id}}"
#if(($employee->id) == (isset($scorecard_info->employee_id)?$scorecard_info->employee_id:''))
selected
#endif>{{$employee->first_name}} {{$employee->middle_name}} {{$employee->lastname}}
</option>
#endforeach
</select>
<br>
{{-- <small>Select Employee for the Objective Button to appear</small> --}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="description">Description</label>
<textarea name="scorecard_description" class="form-control" id="description" style="resize: none;height: 40px;" placeholder="score card description">{{ $scorecard['description'] }}</textarea>
</div>
</div>
</div>
<div id="objectivesData" class="row ">
#include('organization::objectiveAdd')
</div>
</div>
</div>
<div class="row col-md-10 col-md-offset-1">
<div class="row col-md-12">
<button id="newobjectivebtn" type="button" style="width:200px; float: left; padding: 5px;background-color:#a3d84e; border: 1px solid #fff; color: #fff; display: none;">Add new Objective</button>
</div>
<div class="row col-md-12 text-center" ><br>
<div id="listobjective" style="max-height:400px;">
</div> <br>
<button type="button" id="savescorecard" style="width: 365px; padding: 5px;
background-color:#a3d84e; border: 1px solid #fff; color: #fff; display: none; float:right;">Save Scorecard</button>
</div>
</form>
This is jquery for adding new objective
$('#newobjectivebtn').click(function(){
var objectiveIndex = $(this).data("objective-index");
let form = $('form');
$.ajax({
headers:{
'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
},
type:'POST',
url:'{{route('add_scorecard_objectives')}}',
data:form.serialize(),
success:function(response){
var div = $('#objectivesData')
div.append(response);
},
error:function(response){
toastr.error('System Error , Contact Administrator!');
}
})
});
This is the jquery code for adding new kpi
$('#objectivesData').on('click','.newkpibtnn',function(){
let form = $('form');
var objectiveIndex = $(this).data("objective-index");
console.log(objectiveIndex);
$.ajax({
headers:{
'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
},
type: "POST",
url: "{{ route('add_objectives_kpis') }}",
data:form.serialize() + "&objectiveIndex=" + objectiveIndex,
success: function(response) {
var div = $('#kpis_row_data')
div.append(response);
},
error: function(error) {
console.log(error);
}
});
});
This is the objectiveAdd.blade.php file
#foreach ($scorecard['objectives'] as $objective)
<div class="row">
<div class="row col-md-12 " id="objectives_page">
<div class="container-fluid spark-screen">
<div class="row">
<div class="box box-green">
<div class="box-header with-border">
<h2 style="font-size: 22px;margin-bottom: -5px;margin-top: 0px; text-align:center;">Scorecard Objective</h2>
</div>
<div class="box-body" >
<div class="row col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-4">
<div class="form-group col-ms-12">
<label for="Objective">Name</label>
<input type="text" name="objectives[name]" value="{{ isset($objective['name'])?$objective['name']:'' }}" class="form-control" style="margin-bottom: 0px;" placeholder="objective name" />
<small id="error_objectivename" class="hidden" style="color: red;margin-left: 1%;font-size: 13px;height:40px;">Enter a Objective Name</small>
</div>
</div>
<div class="col-md-3">
<div class="form-group col-sm-12">
<label for="description">Weight</label>
<input class="form-control" maxlength="2" value="{{ isset($objective['weight'])?$objective['weight']:'' }}" type="number" name="objectives[weight]" placeholder="%" min="1" max="100" style="margin-bottom: 1px;">
<small id="error_objectiveweight" class="hidden" style="color: red;margin-left: 1%;font-size: 13px;height:40px;">Add Weight</small>
</div>
</div>
<div class="col-md-4">
<div class="form-group col-sm-12">
<label for="description">Description</label>
<textarea name="objectives[description]" class="form-control" id="objectivedescription" style="resize: none;height:40px;" placeholder="enter descriprion">{{ isset($objective['description'])?$objective['description']:'' }}</textarea>
</div>
</div>
<div class="col-md-1">
<span class="badge badge-pill delete-form" style="color: red !important; background: transparent !important; height:50px; padding-left: 50px; padding-top:40px; padding-right:60px;cursor: pointer;">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</span>
</div>
</div>
<div class="row" >
<div class="form-group col-md-11">
<table class="table table-bordered table-condensed" id="kpis_table" >
<thead>
<tr>
<th scope="col" class="width-25-per">KPI Name</th>
<th scope="col" class="width-25-per">Weight</th>
<th scope="col" class="width-20-per">Description</th>
<th scope="col" class="width-25-per">Expected Delivery</th>
<th scope="col" class="width-10-per">Goal</th>
<th scope="col" class="width-10-per"></th>
</tr>
</thead>
<tbody class="addKpis" id="kpis_row_data">
#include('organization::objectiveAddKpi')
</tbody>
</table>
</div>
</div>
</div>
<div class="row col-md-10 col-md-offset-1">
<div class="row col-md-12">
<button class="newkpibtnn" data-objective-index="{{ $index }}" type="button" style="width:200px; float: left; padding: 5px;background-color:#a3d84e; border: 1px solid #fff; color: #fff;">Add new KPI</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
My routes.php file
Route::post('/add_objective', 'OrganizationController#addScorecardObjective')->name('add_scorecard_objectives');
Route::post('/add_kpis', 'OrganizationController#addKpi')->name('add_objectives_kpis');
This is my controller
public function addScorecardObjective(Request $request)
{
$data = $request->all();
unset($data['expected_delivery_date']);
$data['objectives'] = array(['name'=>'','weight'=>'','description'=>'','kpis'=>[
['name'=>'','weight'=>'','description'=>'','expected_delivery_date'=>'','goal'=>'']
]]);
return view('organization::objectiveAdd')->with([
'scorecard'=>$data
]);
}
public function addKpi(Request $request)
{
$data = $request->all();
$objectiveIndex = $data['objectiveIndex'];
$data['objectives'] = array($data['objectives']);
$data['objectives'][$objectiveIndex]['kpis'] = array(['name'=>'','weight'=>'','description'=>'','expected_delivery_date'=>'','goal'=>'']);
return view('organization::objectiveAdd')->with([
'scorecard'=>$data
]);
}
I want to be able to add a number of kpis in a particular objective whenever I click on add new objective button on that particular objective.
I just can't get my head around this.
I want to fetch product images/items from the database and show in a carousel. But i want to have 3 images/items on each slide.
I have tested that it work by just hardcoding/repeating the code, but i want it to work in the foreach loop that i run from the result of the database question. But i just cant get it to work properly.
Here is my code that i am working on.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner"> <?php
$x=0;
foreach($result as $r)
{
if (($x % 3) == 0)
{?>
<div class="carousel-item <?php if($x == 0){ echo "active"; }?>">
<div class="album py-5 bg-light">
<div class="container">
<div class="row"><?php
}?>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" style="max-height: 300px"
src="../productimages/<?php echo $r['pid']."/".$r['filename']; ?>"
alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text
below as a natural lead-in to additional content. This content
is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div><?php
if (($x % 3) == 0)
{?>
</div>
</div>
</div>
</div><?php
}
$x++;
}?>
</div>
<button class="carousel-control-prev"
style="width: 3.5%; height: 200px; top: 30%;" type="button"
data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"><i
class="bi bi-arrow-left-square-fill text-warning" fill="black"
style="font-size: 50px; position: relative; top: -23px;"></i></span> <span
class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next"
style="width: 3.5%; height: 200px; top: 30%;" type="button"
data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon bs-orange" aria-hidden="true"><i
class="bi bi-arrow-right-square-fill text-warning"
style="font-size: 50px; position: relative; top: -23px;"></i></span> <span
class="visually-hidden">Next</span>
</button>
</div>
in my code i used
<img class='container card-body furniture-size' src="../FurnitureImages/<? echo$item->getImage().'-1.jpg'?>"
but when i test it the image name is
<?%20echo%20$item->getImage().%27-1.jpg%27%20?>
instead of
"furniture1-1.jpg"
the section with the code is:
<div class="center-align main-side furniture-box " style="float: right">
<h1 class="w-100 p-5 pulse text-white" >Furniture</h1>
<div class="col-sm-12 row" style="margin-left: 175px">
<?php foreach ($view->searchResult as $item) { ?>
<div class='furniture-box border-white col-sm-4 pt-2 pb-3 m-1' style='float: right; color:#fff; background:#9fa9a3'>
<?php echo $item->getFurnitureName()?>
<img class="container card-body furniture-size'" src="../FurnitureImages/<?php echo $item->getImage() . '-1.jpg'; ?>"/>
Color: <?php echo $item->getFurnitureColour()?>
<br>
View to Bid
</div>
<?php }?>
</div>
</div>
can anyone help me fix this please?
How do I hide the image tag if there is no image present? Basically, I have an image gallery that has 4 images that can be set. However, if a product has 2 images how do I hide the other 2 image tags? What would be the best method to use?
<img src="/images/large/<?=$prod_id?>.jpg" onclick="openModal();currentSlide(1)" style="border: 1px solid #cccccc;" class="hover-single"/>
<div class="row">
<p style="text-align:center;">Click on image to enlarge</p>
<div class="column">
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:80px; height:80px;" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal" style="display: block;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides" style="display: block;">
<div class="numbertext">1 / 4</div>
<img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">2 / 4</div>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">3 / 4</div>
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">4 / 4</div>
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<a class="prev" onclick="plusSlides(-1)"><</a>
<a class="next" onclick="plusSlides(1)">></a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="gallery cursor active" src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(4)">
</div>
</div>
</div>
Your modal-content code can be rewritten as below:
check if the image file exists or not
display the slide if the image file exists, do nothing if not.
for($i = 1; $i<=4; $i++) {
$img_file = '/images/large'.$i.'/'.$prod_id.'.jpg';
if(file_exists($img_file)) {
$display = ($i == 1) ? ' block' : ' none';
echo '<div class="mySlides" style="display:'.$display.';">';
echo ' <div class="numbertext">'.$i.' / 4</div>';
echo ' <img src="'.$img_file.'" style="width:95%; height:95%; margin-left: 2.5%;">';
echo '</div>';
}
}
The above code can be used to replace the following code section:
<div class="mySlides" style="display: block;">
<div class="numbertext">1 / 4</div>
<img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">2 / 4</div>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">3 / 4</div>
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">4 / 4</div>
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
Sure it is not the best way to check file_exists each time. This can be improved by means of storing the number of images for each product in your data set / database. Then just set a new variable such as $img_num to replace the 4 in the loop.
Try this code:
<div class="row">
<p style="text-align:center;">Click on image to enlarge</p>
<div class="column">
<?php if(file_exists('/images/large2/'.$prod_id.'.jpg')){<?php>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"><?php }
</php>
Here is possible idea for your requirement :
$query = "here is your query";
$res = "your query executed";
$imagearray = array();
$i = 0;
while($row = mysql_fetch_array($res))
{
if(file_exists(imagepath.$row["image"]))
{
$imagearray[$i] = $row["image"];
$i++
}
}
Hi their Brother ild flue did a good work, but we can enhance the code a bit more but making the fetching a bit more dynamic, I propose the code below,
scan the dir for existing folders(in that way u don't need to depend
on the arbitrary number to indicate the folder
see that those paths with ur image exist or not
display the specified images and let the rest of the be discarded.
<div id="myModal" class="modal" style="display: block;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<?php
$k=1;
$dirs = array_filter(glob('images/*'), 'is_dir');
foreach ( $dirs as $allLargeDir ){
$imgPath=$allLargeDir."/".$prod_id.".jpg";
if(file_exists($imgPath)){
?>
<div class="mySlides" style="display: block;">
<div class="numbertext"><?php echo $k++." / ".$n; ?></div>
<img src="<?php echo $imgPath;?>" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<?php
}
}
?>
I want to do PG booking, I have one form field in that field(index.php) i select room sharing like 1 sharing or 2 sharing etc...after select this pg sharing i passed the value in next page(pg_deatils.php) through AJAX and i select from DB which room are having 1 sharing or 2 sharing after i return the value in index.php still i am getting correct after that i want append the value in html,insteed of Room 1,Romm 2... i want append the value of console.log(value.pg_id);// 2,1 and insteed of Bed 1,Bed1...i want to append console.log(value.room_number);//room1,room2
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);
}
?>
I assumed certain data from your database table and created this. You will have to tweak it all a little to get it according to your data.
<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 += '<button type="button" class="btn btn-primary" style=" width: 71px; ">Bed ' + i + '</button>\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);
?>