how i can do multi show hide in loop jquery
i am doing like page northguru.com
page name is packages
it has a javascript code which make like that :
we have div call it container included buttons all buttons when click show hidden div call it sub explain what they mean or have all sub div shows in the same container
i did this all
the problem is :
i have data repeated from sql good and sub data brings good but when press any button to show sub only the first container subs shows why ??
page name is packages
it has a javascript code which make like that :
we have div call it container included buttons all buttons when click show hidden div call it sub explain what they mean or have all sub div shows in the same container
i did this all
the problem is :i have data repeated from sql good and sub data brings good but when press any button to show sub only the first container subs shows why ??
ASKER
<script>
function show1(){
document.getElementById('Quick View').style.display = 'block';
document.getElementById('Download').style.display = 'none';
document.getElementById('Customize').style.display = 'none';
document.getElementById('Book').style.display = 'none';
document.getElementById('Save').style.display = 'none';
document.getElementById('Hotel').style.display = 'none';
document.getElementById('Inclusion').style.display = 'none';
document.getElementById('Cost').style.display = 'none';
}
function show2(){
document.getElementById('Quick View').style.display = 'none';
document.getElementById('Download').style.display = 'block';
document.getElementById('Customize').style.display = 'none';
document.getElementById('Book').style.display = 'none';
document.getElementById('Save').style.display = 'none';
document.getElementById('Hotel').style.display = 'none';
document.getElementById('Inclusion').style.display = 'none';
document.getElementById('Cost').style.display = 'none';
}
function show3(){
document.getElementById('Quick View').style.display = 'none';
document.getElementById('Download').style.display = 'none';
document.getElementById('Customize').style.display = 'block';
document.getElementById('Book').style.display = 'none';
document.getElementById('Save').style.display = 'none';
document.getElementById('Hotel').style.display = 'none';
document.getElementById('Inclusion').style.display = 'none';
document.getElementById('Cost').style.display = 'none';
}
function show4(){
document.getElementById('Quick View').style.display = 'none';
document.getElementById('Download').style.display = 'none';
document.getElementById('Customize').style.display = 'none';
document.getElementById('Book').style.display = 'block';
document.getElementById('Save').style.display = 'none';
document.getElementById('Hotel').style.display = 'none';
document.getElementById('Inclusion').style.display = 'none';
document.getElementById('Cost').style.display = 'none';
}
function show5(){
document.getElementById('Quick View').style.display = 'none';
document.getElementById('Download').style.display = 'none';
document.getElementById('Customize').style.display = 'none';
document.getElementById('Book').style.display = 'none';
document.getElementById('Save').style.display = 'block';
document.getElementById('Hotel').style.display = 'none';
document.getElementById('Inclusion').style.display = 'none';
document.getElementById('Cost').style.display = 'none';
}
function show6(){
document.getElementById('Quick View').style.display = 'none';
document.getElementById('Download').style.display = 'none';
document.getElementById('Customize').style.display = 'none';
document.getElementById('Book').style.display = 'none';
document.getElementById('Save').style.display = 'none';
document.getElementById('Hotel').style.display = 'block';
document.getElementById('Inclusion').style.display = 'none';
document.getElementById('Cost').style.display = 'none';
}
function show7(){
document.getElementById('Quick View').style.display = 'none';
document.getElementById('Download').style.display = 'none';
document.getElementById('Customize').style.display = 'none';
document.getElementById('Book').style.display = 'none';
document.getElementById('Save').style.display = 'none';
document.getElementById('Hotel').style.display = 'none';
document.getElementById('Inclusion').style.display = 'block';
document.getElementById('Cost').style.display = 'none';
}
function show8(){
document.getElementById('Quick View').style.display = 'none';
document.getElementById('Download').style.display = 'none';
document.getElementById('Customize').style.display = 'none';
document.getElementById('Book').style.display = 'none';
document.getElementById('Save').style.display = 'none';
document.getElementById('Hotel').style.display = 'none';
document.getElementById('Inclusion').style.display = 'none';
document.getElementById('Cost').style.display = 'block';
}
</script>ASKER
<input type="button" class="btn btn-primary" name="tab" value="Quick View" onClick="show1()" style="margin-top:15px; width:200px;">
<input type="button" class="btn btn-primary" name="tab" value="Download" onClick="show2()" style="margin-top:15px; width:200px;">
<input type="button" class="btn btn-primary" name="tab" value="Customize" onClick="show3()" style="margin-top:15px; width:200px;">
<input type="button" class="btn btn-primary" name="tab" value="Book" onClick="show4()" style="margin-top:15px; width:200px;">
<input type="button" class="btn btn-primary" name="tab" value="Save" onClick="show5()" style="margin-top:15px; width:200px;">ASKER
<div id="Book" class="hide breadcrumb row">
</div>
<div id="Quick View" class="hide">
</div>
<div id="Download" class="hide breadcrumb">
</div>
<div id="Customize" class="hide breadcrumb">
</div>
<div id="Hotel" class="hide">
</div>
<div id="Inclusion" class="hide">
</div>
<div id="Cost" class="hide">
</div>ASKER
all works good.
when you see in the first and second image i have right side buttons all of them shows div using java code .
when loop this divs you can see ---- in above for example " manali" package this is container--- all sub divs included and shows in the same container when you click download or save or book button
on my case in any package click download or save or book only shows sub divs on the first package only
thats good??
when you see in the first and second image i have right side buttons all of them shows div using java code .
when loop this divs you can see ---- in above for example " manali" package this is container--- all sub divs included and shows in the same container when you click download or save or book button
on my case in any package click download or save or book only shows sub divs on the first package only
thats good??
ASKER
can i include video??
ASKER
ASKER
i can upload videos on outside server link here to show you the problem
Ok that is a bit better - I am still not clear on what your questions is but I can see a way to make your code a lot more streamlined. By adding a class to your buttons and a custom id attribute you only need one function to toggle your tabs.
I am curious though - you appear to be using Bootstrap already why don't you just use the Tabs they provide
https://getbootstrap.com/docs/3.3/javascript/#tabs
Here is your code re-written to use jQuery and a single event function based on class
CSS
jQuery
On to your specific code
I am curious though - you appear to be using Bootstrap already why don't you just use the Tabs they provide
https://getbootstrap.com/docs/3.3/javascript/#tabs
Here is your code re-written to use jQuery and a single event function based on class
CSS
.myButton {
margin-top: 15px;
width: 200px;
}
.myDiv {
display: none;
}<input type="button" class="btn btn-primary myButton" name="tab" data-id="Book" value="Quick View">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Download" value="Download">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Customize" value="Customize">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Book" value="Book">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Save" value="Save">
<div id="Book" class="myDiv breadcrumb row">Book</div>
<div id="Quick View" class="myDiv">Quick View</div>
<div id="Download" class="myDiv breadcrumb">Download</div>
<div id="Customize" class="myDiv breadcrumb">Customize</div>
<div id="Hotel" class="myDiv">Hotel</div>
<div id="Inclusion" class="myDiv">Inclusion</div>
<div id="Cost" class="myDiv">myDiv</div>jQuery
<script>
$(function() {
$('.myButton').click(function(e) {
e.preventDefault();
var trgt = $(this).data('id');
if ($('#' + trgt).is(':visible')) $('#' + trgt).hide();
else {
$('.myDiv').hide();
$('#' + trgt).show();
}
});
});
</script>On to your specific code
when you see in the first and second image i have right side buttons all of them shows div using java code .What image are you referring to - there are no images in the source you posted
ASKER
no problem that is good idea i can use it, suppose it is in a div which will be repeated as count as query from database it will work on all div good
sure that is my problem when retrieve data and repeat div which include this all buttons and sub divs
sure that is my problem when retrieve data and repeat div which include this all buttons and sub divs
ASKER
From what I can tell your code for switching Div's (buttons on the right and tabs on the top) are only working against the content of the first package - instead of showing the content for the package that is represented in the container.
To understand why it is not doing what you want we need to see more code - preferably a working link.
To understand why it is not doing what you want we need to see more code - preferably a working link.
ASKER
<form action="<?php echo $PHP_SELF; ?>" method="post">
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<div class="float-left"><h3 class="mt-3 mb-3" style="color:#F00"><a href="#"></a></h3></div>
<div class="float-right"><h3 class="mt-3 mb-3" style="color:#F00">099999 999 099</h3>
last update : 10/10/2017
</div>
</div>
</div>
<div class="mb-4" id="accordion" role="tablist" aria-multiselectable="true">
<div class="breadcrumb" style="text-align:center; color:#F00">
<br>
<br>
<div class="row">
<div class="col-lg-4 col-sm-4 mb-4">
<label for="Travel Month"><strong>Travel Month</strong></label>
<br>
<style>
#duration{width:200px;}
</style>
<select id="Travel Month" class="form-control" style="width:250px;">
<?php
$test_pack=" SELECT COUNT( * ) AS `Rows` , `valid_date` FROM `packages`GROUP BY `valid_date` ORDER BY `valid_date` LIMIT 0 , 30 ";
$test_query=mysqli_query($connect,$test_pack);
while($test_result=mysqli_fetch_array($test_query)){
?>
<option><?php echo $test_result['valid_date']; ?></option>
<?php
}
?>
</select>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<label for="Trip Duration"><strong>Trip Duration</strong></label>
<br>
<select id="Trip Duration" class="form-control" style="width:250px;">
<?php
$test_trip="SELECT * FROM trip ";
$test_query=mysqli_query($connect,$test_trip);
while($test_result=mysqli_fetch_array($test_query)){
$tr_id=$test_result['trip_id'];
?>
<option><?php echo $test_result['trip_name']; ?></option>
<?php
}
?>
</select>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<style>
.hide {
display: none;
}
p {
font-weight: bold;
}
</style>
<script>
function show22(){
document.getElementById('cites').style.display = 'block';
document.getElementById('themes').style.display = 'none';
}
function show33(){
document.getElementById('cites').style.display = 'none';
document.getElementById('themes').style.display = 'block';
}
</script>
<input type="radio" name="tab" value="cites" onclick="show22();" />
cites
<input type="radio" name="tab" value="themes" onclick="show33();" />
themes
<div id="cites" class="show">
<input id="autocomplete1" class="form-control" name="cites" placeholder="cites">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$( "#autocomplete1" ).autocomplete({
source: ["El Gouna","Sharm El Sheikh","Hurghada","Marsa Alam","Il Cairo","Luxor","Assuan","Abu Simbel","Alexandria","Alamein","Safaga","Abidos","Abu Dabbab","Abu Redis","Assiut","Balat","Budkhola","Dairiut","Damietta","Dendera","Edfu","El Arish","Esna","Hamata","Ismailia","Komombo","L'Oasi di Bahareia","L'Oasi di Baris","L'Oasi di Dakhal","L'Oasi di Kharga","Makadi Bay","Malawi","Marsa Matrouh","Menia","Montagna del Galalah","Mout Naga Hammadi","Port Said","Porto Ghaleb","Quena","Rafah","Ras Ghalaeb","Rashid","Sharkeia","Sokhna","Suez","Tenida","Wadi El Natroun","Zaffarana" ]
});
</script>
</div>
<div id="themes" class="hide">
<input id="autocomplete2" class="form-control" name="themes" placeholder="Tema">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$( "#autocomplete2" ).autocomplete({
source: ["Mare e Benessere","Luxory","Gruppi e Incentivi","Eco-Tourism","Turismo Storico Culturale","Il Turismo Industriale","Avventure","Trekking per lunghe distanze","Turismo medico","Safari Nel deserto","Viaggio last-minute","Disintossicarsi dalla tecnologia","Snorkeling o immersioni","Una crociera lungo un fiume","Viaggi Religosi","Caccia e Pesca","Viaggi per Affari","Viaggi insoliti","Viaggi Studi","Viaggi di Nozzie","Viaggi sportivi"]
});
</script>
</div>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<label for="Hotel Categories"><strong>Hotel Categories</strong></label>
<br>
<select id="Hotel Categories" class="form-control" style="width:250px;">
<?php
$sqlhotel="SELECT * FROM hotels ";
$queryhotel=mysqli_query($connect,$sqlhotel);
while($resulthotel=mysqli_fetch_array($queryhotel)){
?>
<option value="<?php echo $resulthotel['hotel_name'];?>"><?php echo $resulthotel['hotel_name'];?> ( <?php echo $resulthotel['Rating'];?> )</option>
<?php
}
?>
</select>
</div>
<div class="col-lg-2 col-md-4 mb-4">
NO. Of Rooms:
<select class="form-control" style="width:70px;">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<script>
$(document).ready(function(){
$("#sadults").change(function () {
if ($(this).val() == "4") {
$("#child").hide();
$("#childage").hide();
} else {
$("#child").show();
$("#childage").show();
}
});
});
</script>
<div class="col-lg-2 col-md-4 mb-4">
NO. Of Adults:
<select class="form-control" style="width:70px;" id="sadults">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col-lg-2 col-md-4 mb-4" id="child" style="display:none;">
NO. Of Children:
<select class="form-control" style="width:70px;" >
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col-lg-2 col-md-4 mb-4" id="childage" style="display:none;">
Age Of Childern:
<select class="form-control" style="width:70px;" >
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<input type="submit" class="btn btn-primary" name="Modify Search" value="Modify Search"
style="padding:15px; margin-top:20px; width:200px;">
</div>
</div>
</div>
<br>
<script>
$(document).ready(function(){
$("#sadults").change(function () {
if ($(this).val() == "4") {
$("#child").hide();
$("#childage").hide();
} else {
$("#child").show();
$("#childage").show();
}
});
});
</script>
<div class="row">
<div class="col-lg-12">
<?php
$sqlcount="SELECT COUNT(package_name)FROM packages";
$querycount=mysqli_query($connect,$sqlcount);
$resultcount=mysqli_fetch_array($querycount);
?>
<div class="float-left">Packages Found : <span style="color:red"><?php echo $resultcount['COUNT(package_name)']; ?></span></div>
<div class="float-right" style="display:inline">
<style>
#duration{width:200px;}
</style>
<script>
$(document).ready(function(){
$("#SortBy").change(function () {
if ($(this).val() == "1") {
$("#first").show();
$("#second").hide();
} else {
$("#first").hide();
$("#second").show();
}
});
});
</script>
Sort By :
<select id="Sort By" class="form-control" style="width:250px;">
<option>Select One</option>
<option>Star Rating (1-5)</option>
<option>Star Rating (5-1)</option>
</select>
</div>
</div>
</div>
<br>
<br>
<!-- Blog Post -->
<?php
$sqlpackages="SELECT * FROM packages ORDER BY Package_Price ASC ";
$querypackages=mysqli_query($connect,$sqlpackages);
while($resultpackages=mysqli_fetch_array($querypackages)){
?>
<div class="card mb-4">
<div class="card-header">
<h5 class="float-left"><?php echo $resultpackages['package_name']; ?> <a href="ViewDetails.php?id=<?php echo $resultpackages['package_id']; ?>">View Details</a></h5>
<h5 class="float-right">package ID : <span style="color:red"><?php echo $resultpackages['package_id']; ?></span></h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-2">
<a href="#">
<?php
$pac_name=$resultpackages['package_id'];
$sqlimg="SELECT content FROM packages_image WHERE packageID='$pac_name' LIMIT 1";
$queryimg=mysqli_query($connect,$sqlimg);
while($resultimg=mysqli_fetch_array($queryimg)){
echo '<a href="#"><img src="data:image/jpeg;base64,'.base64_encode( $resultimg['content'] ).'" width="140px" height="140px"/></a>';
}
?>
</a>
</div>
<!-- tour advantages -->
<div class="col-lg-7">
<h3 class="breadcrumb" style="color:#C00; text-align:center"><?php echo $resultpackages['Package_Price']; ?> euro. </h3>
<ul class="float-left">
<li class="float-left list-group" style="padding-left:15px;"><?php echo $resultpackages['HName1']; ?></li>
<li class="float-left list-group" style="padding-left:15px;"><?php echo $resultpackages['HName2']; ?></li>
<li class="float-left list-group" style="padding-left:15px;"><?php echo $resultpackages['Car_Used']; ?></li>
<li class="float-left list-group" style="padding-left:15px;"><?php echo $resultpackages['meal1']; ?></li>
<li class="float-left list-group" style="padding-left:15px;"><?php echo $resultpackages['meal2']; ?></li>
</ul>
<br><br><br>
<ul class="float-left">
<li class="float-left list-group" style="padding-left:15px;"><a style=" color:#009; text-decoration:underline" onClick="show1()">overview</a></li>
<li class="float-left list-group" style="padding-left:15px;"><a style=" color:#009; text-decoration:underline" onClick="show6()">hotel</a></li>
<li class="float-left list-group" style="padding-left:15px;"><a style=" color:#009; text-decoration:underline" onClick="show7()">inclusion</a></li>
<li class="float-left list-group" style="padding-left:15px;"><a style=" color:#009; text-decoration:underline" onClick="show8()">cost</a></li>
</ul>
</div>
<!-- menu right -->
<div class="list-group">
<style type="text/css">
.myButton {
margin-top: 15px;
width: 200px;
}
.myDiv {
display: none;
}
</style>
<script>
$(function() {
$('.myButton').click(function(e) {
e.preventDefault();
var trgt = $(this).data('id');
if ($('#' + trgt).is(':visible')) $('#' + trgt).hide();
else {
$('.myDiv').hide();
$('#' + trgt).show();
}
});
});
</script>
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Book" value="Quick View">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Download" value="Download">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Customize" value="Customize">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Book" value="Book">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Save" value="Save">
</div>
</div>
<div id="Book" class="myDiv breadcrumb row">
<div class="row">
<div class="col-lg-3 col-sm-4 mb-4">
<label for="datepicker"><strong>Start date</strong></label>
<br>
<input id="datepicker" class="form-control">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$( "#datepicker" ).datepicker();
</script>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<label for="Trip Duration"><strong>Trip Duration</strong></label>
<br>
<?php echo $resultpackages['package_id']; ?>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<label for="Hotel"><strong>Hotel</strong></label>
<br>
<?php echo $resultpackages['HName1']; ?>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<label for="meal plan"><strong>meal plan</strong></label>
<br>
<?php echo $resultpackages['meal1']; ?>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<label for="car used"><strong>car used</strong></label>
<br>
<?php echo $resultpackages['Car_Used']; ?>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<label for="clientname"><strong>client name</strong></label>
<br>
<input type="text" class="form-control" name="clientname">
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6>NO. Of Rooms:</h6>
<select class="form-control" style="width:70px;">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<script>
$(document).ready(function(){
$("#sadults").change(function () {
if ($(this).val() == "4") {
$("#child").hide();
$("#childage").hide();
} else {
$("#child").show();
$("#childage").show();
}
});
});
</script>
<div class="col-lg-2 col-md-4 mb-4">
<h6>NO. Of Adults:</h6>
<select class="form-control" style="width:70px;" id="sadults">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="col-lg-2 col-md-4 mb-4" id="child" style="display:none;">
<h6>NO. Of Children:</h6>
<select class="form-control" style="width:70px;">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-lg-3 col-md-4 mb-4" id="childage" style="display:none";>
<h6>Age Of Childern:</h6>
<select class="form-control" style="width:70px;">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<h6>Comment :</h6>
<textarea id="mytextarea" style="width:250px;">please write here....</textarea>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<input type="button" class="btn btn-primary" name="Modify Search" value="submit" style="padding:15px; margin-top:20px; width:200px;">
</div>
</div>
</div>
<div id="Quick View" class="myDiv">
<div class="breadcrumb">
<p><?php echo $resultpackages['Detailed_Itinerary']; ?></p>
</div>
</div>
<div id="Download" class="myDiv breadcrumb">
<div class="col-lg-12">
<p style="color:#F00">We suggest you to set the standard markup for higher maturity level.</p>
<div class="float-left col-lg-6">
client name :
<input type="text" placeholder="client name" class="form-control" style="width:200px;">
<br>
Download type :
<select id="download" class="form-control" style="width:200px;">
<option>Word</option>
<option>PDF</option>
<option>Email</option>
</select>
<br>
Your Markup :
<input type="text" name="markup" placeholder="10" class="form-control" style="width:200px;">
<input type="button" class="btn btn-primary" name="Download itinerary" value="Download itinerary" style="padding:15px; margin-top:20px; width:200px;">
</div>
<div class="float-right col-lg-6">
<div class="breadcrumb">
<p class="table-primary">net price</p>
<p>dsds</p>
<p>dsds</p>
</div>
<div class="breadcrumb">
<p class="table-primary">your selling price</p>
<p>dsds</p>
<p>dsds</p>
</div>
</div>
</div>
</div>
<div id="Customize" class="myDiv breadcrumb">
<span style="color:#F00">CHANGE ITINERARY</span>
<br>
<div class="row">
<div class="col-lg-3 col-sm-4 mb-4">
<h6>DATE OF TRAVEL</h6>
<input id="datepicker" class="form-control" style="width:200px" name="datepicker">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$( "#datepicker" ).datepicker();
</script>
</div>
<div class="col-lg-3 col-sm-4 mb-4">
<h6>TRIP DURATION</h6>
<select id="Trip Duration" class="form-control" style="width:100px;" name="Duration">
<?php
$test_trip="SELECT * FROM trip ";
$test_query=mysqli_query($connect,$test_trip);
while($test_result=mysqli_fetch_array($test_query)){
$tr_id=$test_result['trip_id'];
?>
<option><?php echo $test_result['trip_name']; ?></option>
<?php
}
?>
</select>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h6>NO. Of Rooms:</h6>
<select class="form-control" style="width:70px;" name="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<script>
$(document).ready(function(){
$("#sadults").change(function () {
if ($(this).val() == "4") {
$("#child").hide();
$("#childage").hide();
} else {
$("#child").show();
$("#childage").show();
}
});
});
</script>
<div class="col-lg-2 col-md-4 mb-4">
<h6>NO. Of Adults:</h6>
<select class="form-control" style="width:70px;" id="sadults" name="Adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col-lg-2 col-md-4 mb-4" id="child" style="display:none;">
<h6>NO. Of Children:</h6>
<select class="form-control" style="width:70px;" name="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-lg-3 col-md-4 mb-4" id="childage" style="display:none";>
<h6>Age Of Childern:</h6>
<select class="form-control" style="width:70px;" name="agechildren">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="col-lg-3 col-sm-4 mb-4">
<h6>CAR USED</h6>
<select class="form-control" style="width:100px" name="carused">
<?php
$sqlcars="SELECT * FROM cars";
$querycars=mysqli_query($connect,$sqlcars);
while($resultcars=mysqli_fetch_array($querycars)){
?>
<option value="<?php echo $resultcars['car_name'];?>"><?php echo $resultcars['car_name'];?></option>
<?php
}
?>
</select>
</div>
<div class="col-lg-3 col-sm-4 mb-4">
<h6>MEAL PLAN</h6>
<select class="form-control" name="meal" id="meal" style="width:100px" name="mealplan">
<option value="">select</option>
<option value="Breakfast">Breakfast</option>
<option value="Breakfast/Dinner">Breakfast/Dinner</option>
<option value="Breakfast/Lunch/Dinner">Breakfast/Lunch/Dinner</option>
<option value="Soft All Inclusive">Soft All Inclusive</option>
<option value="All Inclusive">All Inclusive</option>
</select>
</div>
<div class="col-lg-3 col-md-4 mb-4">
<label for="clientname"><h6>client name</h6></label>
<br>
<input type="text" class="form-control" name="clientname">
</div>
<div class="col-lg-3 col-sm-4 mb-4">
<h6>HOTEL CATEGORY</h6>
<select id="Hotel Categories" class="form-control" style="width:100px;" name="category">
<?php
$sqlhotel="SELECT * FROM hotels ";
$queryhotel=mysqli_query($connect,$sqlhotel);
while($resulthotel=mysqli_fetch_array($queryhotel)){
?>
<option value="<?php echo $resulthotel['hotel_name'];?>"><?php echo $resulthotel['hotel_name'];?> ( <?php echo $resulthotel['Rating'];?> )</option>
<?php
}
?>
</select>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<h6>Comment :</h6>
<textarea id="mytextarea" class="form-control" name="Comment" style="width:250px;">please write here....</textarea>
</div>
<div class="col-lg-4 col-md-4 mb-4">
<input type="submit" class="btn btn-primary" name="Modify" value="Modify Search" style="padding:15px; margin-top:20px; width:200px;">
</div>
</div>
</div>
<div id="Save" class="col-lg-12 myDiv breadcrumb">
<p style="color:#F00">We suggest you to set the standard markup for higher maturity level.</p>
<div class="float-left col-lg-6">
client name :
<input type="text" placeholder="client name" class="form-control" style="width:200px;">
<br>
Your Markup :
<input type="text" name="markup" placeholder="10" class="form-control" style="width:200px;">
<div class="col-lg-4 col-md-4 mb-4">
<input type="button" class="btn btn-primary" name="save in favourite" value="save in favourite" style="padding:15px; margin-top:20px; width:200px;">
</div>
<div class="float-right col-lg-6">
<div class="breadcrumb">
<p>dsdsdsd</p>
<p>dsds</p>
<p>dsds</p>
</div>
<div class="breadcrumb">
<p>dsdsdsd</p>
<p>dsds</p>
<p>dsds</p>
</div>
</div>
</div>
</div>
<div id="Hotel" class="myDiv">
<table class="breadcrumb table">
<thead>
<th>Hotel</th>
<th>Hotel Name</th>
<th>Hotel Description</th>
</thead>
<?php
$name1=$resultpackages['HName1'];
$name2=$resultpackages['HName2'];
$name3=$resultpackages['HName3'];
$name4=$resultpackages['HName4'];
$name5=$resultpackages['HName5'];
$sqlhot="SELECT * FROM hotels WHERE hotel_name='$name1' OR hotel_name='$name2' OR hotel_name='$name3' OR hotel_name='$name4' OR hotel_name='$name5' ";
$queryhot=mysqli_query($connect,$sqlhot);
while($resulthot=mysqli_fetch_array($queryhot)){
?>
<tr class="table-primary">
<td><?php echo '<img src="data:image/jpeg;base64,'.base64_encode($resulthot['hotel_img_content']).'" width="50px" height="50px"/>'; ?></td>
<td><?php echo $resulthot['hotel_name']; ?></td>
<td><?php echo $resulthot['Description']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
<div id="Inclusion" class="myDiv">
<p><?php echo $resulthot['Description']; ?></p>
</div>
<div id="Cost" class="myDiv">
<table class="breadcrumb table">
<tr class="table-sm table-primary">
<td>No. Of Pax</td>
<td>Count</td>
<td>Pax Price</td>
<td>Total Price</td>
</tr>
<tr class="table-sm">
<td>1</td>
<td>1</td>
<td><?php echo $resulthot['Package_Price']; ?></td>
<td><?php echo $resulthot['Package_Price']; ?></td>
</tr>
<tr class="table-sm">
<td></td>
<td></td>
<td style="background-color:#F90"><strong>Total Package Price</strong></td>
<td style="background-color:#F90"><strong><?php echo $resulthot['Package_Price']; ?></strong></td>
</tr>
<tr class="table-sm">
<td></td>
<td></td>
<td></td>
<td>* inclusive of all taxes </td>
</tr>
</table>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</form> ASKER
for privcy i can't put link here
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You will need to rephrase your question if you are hoping to get answers. As things stand we don't know what you are asking. You have not provided source code or a link and your description of your requirement is very vague.
Can I suggest that you break it down for us so that we know what you are asking.
1. If you can provide a link either to your code or a link where you have replicated the problem (jsFiddle / Plunkr)
2. Explain in point form what it is you are trying to do
3. Explain to us what is not working
4. Post source code relevant to the problem
5. If you are getting errors tell us what they are.
If you can provide us with good information we can help you - as it stands I am not sure you will get many responses as it is difficult to understand from your question what it is you are wanting to do.