Pass variables to the url through a Select Box

Asked

Viewed 135 times

1

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

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

With this other, in javascript, authored by @dvd apply the variable passed in the URL to all links on the page.

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_;
      }
   }
}

All this works a lot. What I would like now is. Pass the variables to URL, through a select box.

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

Remembering that you can have more than one select. One to layout, another to sidebar, and that the selection of one should be maintained when another is selected and the page is updated.

php javascript
  • 1

    You want to do the same thing, change the page links, only now using selects?

  • @dvd exactly.

  • @dvd, yes, that’s right.

  • But then it got confused for me. What is the relation of the variable in the page URL with the selects box? For example, let’s say the page URL is: site.com.br/? layout=2.... what is the relationship with select box?

  • @dvd I call the variable by typing it in the right browser input? ?layout=2 ?layout=3 etc... I want to call them through select, and not have to type them in the browser input.

  • @dvd I believe you should have a refresh on the page when select is selected right? and no problem, I think your current javascript solution should apply automatically, since the page has updated and it will get the url.

  • 1

    I understood it like this: it checks if the URL has one of the variables, selects automatically in the respective select and inserts in the links of the page... that’s it?

  • @dvd is exactly that.

  • Let’s go continue this discussion in chat.

Show 4 more comments

1 answer

1


You can put us values only the value of the variable that the code will normally capture. I also added a option empty 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 do the refresh on the page when a select is changed:

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);

         }

      });
   }

});

  • As always. Extraordinary solution. I imagine I can also use radio instead of select, changing in var sels = document.querySelectorAll("radio");

  • I understand, it was just out of curiosity, I thought of something, maybe I use a select and a radio. For today this is good. Anything I give a touch. Thank you! ;)

  • Hey, wouldn’t it be interesting a button to reset all variables?

  • One more hand. https://answall.com/q/280250/95735

  • opa: https://answall.com/q/280501/95735

  • The security issue is not important. This is for demonstration. So no problem. It is because it will have several variables, so it will be very big the address.

  • In my view, this seems to be solved with your own select solution. When I select a variable in select, it is marked in select itself. If the variable is in the URL, marked in select is enough.

  • Boy, that must be it, now that you mention it, I think that’s just what I wanted. Something similar to url, biy.ly, etc..

  • The basis for what I am wanting is your own code in this matter. Everything is working perfectly well. I just wanted to mask the variables that appear in the URL.

  • Boy, that would be awesome, I’d really like to see that up and running. In that case the vars would be passed to the URL, but wouldn’t appear in the URL?

  • Yeah. But I’d have to refresh

  • is a good idea, but in this case it would only work in the current user’s browser right? , so you can not send the link to another person.

  • Not because to do so would have to involve database or other server-side resource

  • I understand. So in this case the mask in the URL would be more interesting, although I am interested in your suggestion. Currently it is like this: site.io/? color=red&background=img&sidebar=left For example, the vars summing up with the value and the signs have 30 characters. I thought maybe it was not necessary to automatically generate a code for each var, it could be set manually. for example: ?color=red would look like this: cr type, take the first letter of the var and the first of the value.

  • So it gets very complicated and the URL would remain long (maybe not so much), but to know what is cr would be too complicated

  • Let’s go continue this discussion in chat.

Show 11 more comments

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.