Pass variables to the url through a Select Box

Navigation
1

With this code in php, we pass variables to url manually. 

if (isset($_GET['layout'])) {
    $layout = $_GET['layout'];
} else {
    $layout = '1';
}

With this one, in javascript, authored @dvd we apply the variable passed in the URL in all page links. 

var url_ = location.href,
    param = url_.substring(url_.lastIndexOf("/"), url_.length),
    params = ['layout','teste']; // insira aqui os nomes das variáveis
for(var y=0; y<params.length; y++){
   if(param.indexOf(params[y]) != -1){
      var var_ = url_.substring(url_.indexOf(params[y])+params[y].length+1,url_.length).match(/^(\d|\w){1,}/)[0],
          a_ = document.body.querySelectorAll("a");
      for(var x=0; x<a_.length; x++){
         a_[x].href += (a_[x].href.indexOf("?") == -1 ? "?" : "&")+params[y]+"="+var_;
      }
   }
}
asked by anonymous 21.02.2018 / 16:10

1 answer

1

You can put in the values only the value of the variable that the code will normally capture. I've also added an empty% wrapper which will be the default if there is no variable in the URL: 

<select id="layout" name="layout">
    <option value="">Layout</option>
    <option value="1">Layout 1</option>
    <option value="2">Layout 2</option>
    <option value="3">Layout 3</option>
    <option value="4">Layout 4</option>
</select>

<select id="sidebar" name="sidebar">
    <option value="">sidebar</option>
    <option value="1">sidebar 1</option>
    <option value="2">sidebar 2</option>
    <option value="3">sidebar 3</option>
    <option value="4">sidebar 4</option>
</select>

And the code that will change the variables and links and make the refresh on the page when some select changes: 

document.addEventListener("DOMContentLoaded", function(){

   var url_ = location.href,
       param = url_.substring(url_.lastIndexOf("/"), url_.length),
       params = ['layout','sidebar']; // insira aqui os nomes das variáveis
   for(var y=0; y<params.length; y++){
      if(param.indexOf(params[y]) != -1){

         var var_ = url_.substring(url_.indexOf(params[y])+params[y].length+1,url_.length).match(/^(\d|\w){1,}/)[0],
             a_ = document.body.querySelectorAll("a");

         document.body.querySelector("#"+params[y]).value = var_;

         for(var x=0; x<a_.length; x++){
            a_[x].href += (a_[x].href.indexOf("?") == -1 ? "?" : "&")+params[y]+"="+var_;
         }
      }
   }

   var sels = document.querySelectorAll("select");

   for(var x=0; x<sels.length; x++){
      sels[x].addEventListener("change", function(){

         var sId = this.id,
             sVa = this.value;

         if(sVa && url_.indexOf(sId) == -1){

            location.href = url_+(url_.indexOf("?") == -1 ? "?" : "&")+sId+"="+sVa;

         }else if(sVa && url_.indexOf(sId+"="+sVa) == -1){

            var var_ = url_.substring(url_.indexOf(sId)+sId.length+1,url_.length).match(/^(\d|\w){1,}/)[0];

            location.href = url_.replace(sId+"="+var_, sId+"="+sVa);

         }

      });
   }

});
21.02.2018 / 18:06
What do the characters \\ mean in the parameter of a function in Elixir? How to access attributes of a JSON that was converted with special characters?