Pass URL parameters to Select options with JavaScript and Php

Question

I am kinda new in JavaScript and need some help.

I have a search form in my navigation menu.

Here is my code php+html for the form.

<form action="search.php" name="form-name" method="GET" enctype="multipart/form-data">
  <div class="row"> 
  <div class="col-lg-2 col-md-12 col-sm-12 search">
    <label>Destination</label>
    <select required name="country" id="destination" onChange="getCity(this.value);">
      <option value="">Any destination</option>  
      <?php $query = "SELECT * FROM countries";
       $select_region_query = query($con, $query);
       while ($row = fetch($select_region_query)) {
          $region_id = $row['country_id'];
          $region_name = $row['country_name'];
          echo "<option value='".str_replace("&", "and",$full_region)."'>$full_region</option>";                            
       } 
     ?>
     </select>                         
  </div>
  <div class="col-lg-2 col-md-12 col-sm-12 search ">
     <label>City</label>
      <select name="city" id="city" onChange="get_dropdown_ajax(this.value);">
          <option value="">Any Cruise Line</option>
          <?php $query = "SELECT * FROM cities";
          $select_city_query = query($con, $query);
          while ($row = fetch($select_city_query)) {
            $city_id = $row['city_id'];
            $city_name = $row['city_name'];
            $city_name_value = str_replace("&"," and ",$row['city_name']);
            echo "<option value='$city_name_value'>$city_name</option>";
          }
          ?>
      </select>
   </div>
   <div class="input-group col-lg-4 col-md-12 col-sm-12 search">
      <label>Dates</label>
      <select name="date_1" id="date_1">
         <option value="">Any Day</option>
         <?php 
          for($i=0;$i<31;$i++){
              $i = str_pad($i,2,"0",STR_PAD_LEFT);
              echo "<option value='$i'>$i</option>";  
          }
         ?> 
     </select>
     <select name="date" id="date">                     
         <option value="">Any Month</option>
         <?php   
         for ($i = 0; $i <= 36; $i++) {
           $time = strtotime(sprintf('+%d months', $i));
           $value = date('Y-m', $time);
           $label = date('F-Y', $time);
           $label = str_replace("-", " ", $label);
           echo "<option value='$label'>$label</option>";
        }
     ?>
   </select>                        
   <input type="hidden" id="datepicker">                        
 </div>
<div>
<button type="submit" name="search" class="search_button_nav btn btn-info">
      <span class="glyphicon glyphicon-search"></span></button>              
</div>
</div>
</form>

What I need to achieve is when the user doing a search to get these URL parameters and use these to change my select options based on their choices.

e.g If they search for country United Kingdom on search page my dropdown on countries to display United Kingdom instead of Any Destination.

I tried to do that with php $_GET but I am not sure is a good idea, because my country list is really big and I can create for every country if(issets($_GET)=='United Kingdom)' etc..

Is that something can complete with javascript without have to check the query of url like i tried with php?

I seach for solution and I find on other posts that (window.location); probably can help me.

I tried to console.log(window.location) and I can see the parameters, but how can I split them properly and use them with php?

Any feedback would be helpful.

P.S My url is looking like this one : nameofmysite/search.php?country=+United+Kingdom&chk=1&city_name=%25date_1=05&date=July+2018

So do I understand you right: You have a text input and want to show proposals according to the current input? — lunjius, Nov 03 '17 at 13:35
@Jaspa I want to get the url parameters ?country=abc and that abc to be selected in the search bar — alexlaexalex, Nov 03 '17 at 13:39

score 1 · Accepted Answer · answered Nov 03 '17 at 13:57

I am not sure whether I understand your problem If you just want to set the dopdown-item to the city the user is searching for, using $_GET is no bad idea. You just have to check whether the parameter is given, then you can use it in PHP.

if(isset($_GET['search'])) {
    echo "<option value='".$_GET['search']."'>".$_GET['search']."</option>";
} else {
    echo "<option value=''>Any destination</option>";
}

score 0 · Answer 2 · answered Nov 03 '17 at 14:01

I think you are trying to mix the use of the parameter.

Once the request is sent, the server will process that request and interpret the PHP page in the server before send it to the client (the browser). If you need to check a parameter then you can get it with the global variable $_GET and do whatever you want and build your page conveniently.

Get request parameters from URL in PHP GET URL parameter in PHP

Once the page is built it is sent to the client wich interpret it and your browser renders it. Then you can get the URL with window.location and parse it conveniently with split method or Regular expressions to get what you want from there.

Get request parameters from URL in Javascript How to get URL parameters with Javascript?

But the page is already rendered and what you can do then is manipulate the DOM of the page.

Pass URL parameters to Select options with JavaScript and Php

2 Answers2