search with php and javascript

continue please from this link
https://www.experts-exchange.com/questions/29073129/jquery-select-change-event.html?anchor=a42401633&notificationFollowed=201428978#a42401633

i have search div on top of screen has this items and this code , how it should be to make search button result not conflict with the last code

if($_POST['Modify']){
                  
                  $Travel=$_POST['Travel'];
                  $Duration=$_POST['Duration'];
                  $tab=$_POST['tab'];
                  $Categories=$_POST['Categories'];
                  $rooms=$_POST['rooms'];
                  $Adults=$_POST['Adults'];
                  $children=$_POST['children'];
                  $agechildren=$_POST['agechildren'];
                  $carused=$_POST['carused'];
                  
                  $sqlsearch="SELECT * FROM packages WHERE Trip_Duration LIKE '%$Travel%' OR Trip_Duration LIKE '%$Duration%' OR Detailed_Itinerary LIKE '%$tab%' OR HName1 LIKE '%$Categories%' OR HName2 LIKE '%$Categories%' OR Detailed_Itinerary LIKE '%$rooms%' OR Detailed_Itinerary LIKE '%$Adults%' OR Detailed_Itinerary LIKE '%$children%' OR Car_Used LIKE '%$carused%'";
                  
                  
                  $querysearch=mysqli_query($connect,$sqlsearch);
                  while($resultsearch=mysqli_fetch_array($querysearch)){
                        
                        $searchid=$resultsearch['package_id'];
                        $sqlimg="SELECT content FROM packages_image WHERE packageID='$searchid' LIMIT 1";
                        $imgQuery=mysqli_query($connect,$sqlimg);
                        $imgData=mysqli_fetch_array($imgQuery);
AHMED SAMYownerAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
Hey Ahmed,

OK - I think I see what you want to do. The Database search using your Search Form will be straight forward enough, but the <select> to set the sort order might be little trickier. Currently, you fire the change event on the <select> when the page first loads. If the user hasn't entered any details into the Search form, there will be no info to search on, so not sure how you want to handle that.

The query you fire when the <select> option is changed doesn't do any searching. It just selects all the records:

SELECT * FROM packages ORDER BY Package_Price ASC

When the page is first loaded, before the user has entered any details into the Search form, how do you know which records you want to show. You seem to have 2 very different queries here and I can't figure out how you want to tie them together.
0
 
Chris StanyonCommented:
Post up your code for you page so we can see what you mean. With the code you've posted, it's not clear what you need or how it interacts with you previous question.

Ultimately, you'll need to convert you code from above into PDO, rather than mysqli.

And rather than doing a separate query for the 'content', you can just use one query with a JOIN.
0
 
AHMED SAMYownerAuthor Commented:
related to the question linked above i have search button before select element which is working good but any time the button pressed the java code for select works i need to make another case can i put this in the last code in data.php file ???

and how i do that????
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
Chris StanyonCommented:
Sorry Ahmed ... Still don't really understand how you want this to work with the <select>. Can you post your page up so we can see what's going on.

In the last code, a simple database query was fired when you changed the <select>. The change event was also triggered when you first load the page.

Do you still need to do that search, or do you need to do a different one based on your search form.

We will need to see you code to help us understand what you want.
0
 
AHMED SAMYownerAuthor Commented:
this is full code
<div class="container">
        <form action="<?php echo $PHP_SELF; ?>" method="post">   
      <!-- 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="#"><?php print_r($_SESSION['username']); ?></a></h3></div>
	<div class="float-right"><h3 class="mt-3 mb-3" style="color:#F00"><?php echo $resultcompany['co_Landline']; ?></h3>
    <a href="OfflineEnquiry.php" class="btn btn-primary">OfflineEnquiry</a>
    <a href="Guideview.php" class="btn btn-primary">egitto guide</a>
    </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" name="Travel" 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" name="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>
                                $( "#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>
                                $( "#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" name="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'];?>&nbsp;(&nbsp;<?php echo $resulthotel['Rating'];?>&nbsp;)</option>
						<?php
							}
						?>
                        </select>
                    </div>
					<div class="col-lg-2 col-md-4 mb-4">
										NO. Of Rooms:
                                        <select class="form-control" name="rooms" 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" name="Adults" 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" name="children" 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" name="agechildren" 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" id="Modify" value="Modify Search">
                    </div>
                    </form>
			</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>
						
                        <select id="sortBy" class="form-control" style="width:250px;">
                            <option value="2">Star Rating (1-5)</option>
                            <option value="1">Star Rating (5-1)</option>
                        </select>

        
        		</div>
			</div>
        </div>
		<br>
        <br>
	<div class="container">

       <!-- Page Heading/Breadcrumbs -->
              
       <div class="row" id="response"></div>
       <!-- /.row -->
       
             
	</div>
</body>     
    <!-- /.container -->

Open in new window



and on header
<script src="http://code.jquery.com/jquery.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/jquery.js"></script>
	<script src="js/jquery-ui.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#sortBy').change(function() {
                $.get('data.php', { sort: $(this).val() }, function(data) {
                    $('#response').html(data);
                });
            });
			
			// Trigger the change event when the page loads
    		$('#sortBy').trigger('change');
        }); 
        </script>

Open in new window

0
 
AHMED SAMYownerAuthor Commented:
ok i will try and tell you later

thanks my friend
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.