Make the option selected based on Url parameter in php

Question

I need to select both drop down based on the url parameter

Here is my code

 <select id="parent-cat" name="parent-cat" onchange="getFilterUrl(this.value)">                              
    <option value="www.site.co/?test=101">Test 1</option>                                    
    <option value="www.site.co/?test=102">Test 2</option>  
 </select>

<select id="child-cat" name="child-cat" 
onchange="getFilterUrl(this.value)">  

  <option value="www.site.com/?sample=95">Sample 1</option>
   <option value="www.site.co/?sample=96">Sample 2</option>
   <option value="www.site.co/?sample=97">Sample 3</option>
   <option value="www.site.co/?sample=98">Sample 4</option>
   <option value="www.site.co" selected="">Sample 5</option>
 </select>

<script>
  function getFilterUrl(filterurl) {
    var url = filterurl;        
      if (url) { 
          window.location = url; // redirect
      }
      return false;
 }
</script>

Right now after selecting each drop down, that is refreshed to selected url,

I am looking for code, if we select first drop down, and next one, I need to form url like below for second drop down first option.

Example: if Test 1 is selected, then, Sample 1 selected, the Url should be like beloww with both option as selected

site.co/?test=102&sample=95

How this can be done?

Please anyone help me to achieve this.

Thanks

Do you need to form the URL or change the drop downs? Which? — mplungjan, Jun 13 '19 at 12:04
1. Add options with empty values as first option ("Please select") 2. Get both selected options - if there are two of them, create the URL using https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams — mplungjan, Jun 13 '19 at 12:10
i do not understand. If you submit the form, you can redirect to whatever is selected in the options — mplungjan, Jun 13 '19 at 12:12
If you don't understand, is it make sense of marking duplicate? — Manjunath, Jun 13 '19 at 12:13
I do not understand your question about "any possibilities from php"! — mplungjan, Jun 13 '19 at 12:18
@mplungjan, then leave it, don't answer if you don't know, someone else will answer — Manjunath, Jun 13 '19 at 12:20
You completely misunderstand. Your questions are not making sense. Re-reading your question from the top: ***I need to select both drop down based on the url parameter*** but you post code that does to OPPOSITE if it worked: ***I am looking for code, if we select first drop down, and next one, I need to form url like below for second drop down first option*** and then you have a partial question: ***any possibilities from php*** - I can answer only questions that actually make sense and yours are not clear. Why do you not help me help you? — mplungjan, Jun 13 '19 at 12:23
I have re-opened the question but your have 3 different questions that are not matching — mplungjan, Jun 13 '19 at 12:24
I think this warrants an almost complete re-write. You appear to be basically trying to re-create functionality that already exists in HTML, by using JavaScript. The select fields should be named `test` and `sample`, and have the values you actually want to submit for these parameters (101, 102 for test, 95, 96, … for sample.) Then you put all that into an actual form, have the form action point to `/` - and then you just _submit_ the form, when the selection in one of the fields get changed. (That would be the _only_ JS involved in this.) — 04FS, Jun 13 '19 at 12:57
And then pre-selecting the appropriate options in the select fields, when your script is called using `site.co/?test=102&sample=95`, comes down to the very basic stuff explained in the duplicates you have already been referred to. (Can’t see them right now, but I’m going to assume they were appropriate ones.) — 04FS, Jun 13 '19 at 12:58
@04FS The dupes were https://stackoverflow.com/questions/316781/how-to-build-query-string-with-javascript and https://stackoverflow.com/questions/19941733/dynamically-set-the-value-of-select-dropdown-using-query-string-paramater — mplungjan, Jun 13 '19 at 13:04
@mplungjan ah okay, I thought more in the direction of pre-selecting the relevant options via PHP on the server side, something like https://stackoverflow.com/q/19750607/10955263 or https://stackoverflow.com/q/35607477/10955263 (See you added something along those lines to your answer in between.) — 04FS, Jun 13 '19 at 13:10

mplungjan · Answer 1 · 2019-06-13T13:01:53.713

As I said, your question is not clear

Here is a fixed version of your code.

document.getElementById("container").addEventListener("change",function(e) {
  var parent = document.getElementById("parent-cat").value,
     child = document.getElementById("child-cat").value;
  if (parent && child) {
    var url = "https://site.co?"+parent+"&"+child;
    console.log(url)
    // window.location=url;
  }
});

<div id="container">
<select id="parent-cat" name="parent-cat">                              
    <option value="">Please select</option>
    <option value="test=101">Test 1</option>                                    
    <option value="test=102">Test 2</option>  
 </select>

<select id="child-cat" name="child-cat" >  
<option value="">Please select</option>
  <option value="sample=95">Sample 1</option>
   <option value="sample=96">Sample 2</option>
   <option value="sample=97">Sample 3</option>
   <option value="sample=98">Sample 4</option>
 </select>

</DIV>

In PHP:

document.getElementById("container").addEventListener("change", function(e) {
  var parent = document.getElementById("parent-cat").value,
    child = document.getElementById("child-cat").value;

  document.getElementById("message").innerHTML= parent && child ? "":"Please choose both";


  if (parent && child) document.getElementById("myForm").submit();
});

<form action="redirect.php" id="myForm" method="post">
  <div id="container">
    <select id="parent-cat" name="parent-cat">
      <option value="">Please select</option>
      <option value="test=101">Test 1</option>
      <option value="test=102">Test 2</option>
    </select>

    <select id="child-cat" name="child-cat">
      <option value="">Please select</option>
      <option value="sample=95">Sample 1</option>
      <option value="sample=96">Sample 2</option>
      <option value="sample=97">Sample 3</option>
      <option value="sample=98">Sample 4</option>
    </select>
  </div>
</form>
<span id="message"></span>

using

$parent = isset($_POST['parent-cat']) ? $_POST['parent-cat'] : null;
$child = isset($_POST['child-cat']) ? $_POST['child-cat'] : null;
if ($parent && $child) {
  header("location: https:///www.site.co?".$parent."&".$child);
}

score 0 · Answer 2 · edited Jun 13 '19 at 13:02

If you don't want to redirect immediately after choosing anyone just erase one of the onchange event.

HTML:

<select id="parent-cat" name="parent-cat" onchange="getFilterUrl()">                              
    <option value="test=101">Test 1</option>                                    
    <option value="test=102">Test 2</option>  
 </select>

<select id="child-cat" name="child-cat" 
onchange="getFilterUrl()">  

  <option value="sample=95">Sample 1</option>
   <option value="sample=96">Sample 2</option>
   <option value="sample=97">Sample 3</option>
   <option value="sample=98">Sample 4</option>
   <option value="www.site.co" selected="">Sample 5</option>
 </select>

Script:

function getFilterUrl(filterurl) {

       var s1 = $('#parent-cat').val();
       var s2 = $('#child-cat').val();
       if (s2 == 'www.site.co') {
           s2 = '';
       }
       window.location.replace("http://www.site.co/?"+s1+'&'+s2);

      return false;
 }

In case of 5th option from the second select I exclude the second param from the url. If you have any questions - ask them.

@mplungjan, Yes he is correct , If anyone helped using php, that will be helpful — Manjunath, Jun 13 '19 at 12:34
@AksenP There is however plain JS in the example from the author. — mplungjan, Jun 13 '19 at 12:52
If you click the `[<>]` snippet editor you can make a running example too — mplungjan, Jun 13 '19 at 13:27

Make the option selected based on Url parameter in php

2 Answers2