How to use Select onchange to not show parameters in the url?

Asked

Viewed 215 times

1

I have the following select

<select onchange="location = options[selectedIndex].value" id="sel">
<option value="?cod=<%=cod%>&op=1">opção 1</option>
<option value="?cod=<%=cod%>&op=2">opção 2</option>
<option value="?cod=<%=cod%>&op=3">opção 3</option>
</select>

And the url appears: site/? Cod=x&op=1

I need select sent with internal processing

and the url stay = site/? Cod=x

can be with Hidden or js

Is it possible? thank you in advance for your responses

  • Have you tried Ajax or history.pushState?

  • could just use this.value instead of options[selectedIndex].value.

  • Using PHP to get the values?

  • It is Asp and it takes the same pag for Cod and reorders the menu with op=x. DVD: I switched to onchange="Location = this.value" but the parameter &op=x continues to appear. I need to include some more command?

  • @Valdeirpsr, I read now about history.pushState, but unfortunately pgm in Asp is not Html5. But it will be useful for me in another php and Html5 project. Thank you for your attention.

  • The tip I mentioned was not to solve the problem, it was just to make it simpler :D... I will analyze the code...

Show 1 more comment

1 answer

1


My suggestion is this: create a span shortly after the select (the span does not interfere with anything in the page layout, will be used only to receive a form from which will be sent the value of op). Will stay like this:

<select onchange="redir(this.value)" id="sel">
   <option value="?cod=11&op=1">opção 1</option>
   <option value="?cod=21&op=2">opção 2</option>
   <option value="?cod=31&op=3">opção 3</option>
</select>
<span id="tempform"></span>

Note that in the onchange a function will be called redir passing the value of option selected.

Now enter the function on the page:

function redir(i){
   // pega o valor do select e separa em grupos cod=X e op=X
   var params = i.match(/\?(.+)&(.+)/);
   // pega cod=X
   var cod = "?"+params[1];
   // pega apenas a parte numérica de op=X
   var op = params[2].match(/\d+/)[0];

   // monta o formulário para ser enviado com o valor de op
   // note que o formulário não aparecerá na página com display: none
   var form = '<form style="display: none;" method="post" action="'+location.href+cod+'">'
   +'<input name="op" value="'+op+'">'
   +'</form>';

   // insere o formulário no span
   document.getElementById("tempform").innerHTML = form;
   // faz o submit do formulário
   document.querySelector("#tempform form").submit();
}

By firing the onchange of select, the page will be redirected to itself in this way:

pagina.asp?cod=valor_no_option

At the same time the form created by the script with the field will be submitted op via POST.

This way you can recover the values cod and op in ASP with:

<%
cod = request("cod")
op = request("op")
%>
  • 1

    Excellent solution. In my case I inhibit var=Cod and I took off the var form because Cod is the same and only changes the menu option. It ran perfect. Congratulations and thank you very much!!

  • DVD, I used your model also in other pgm but I had to do a xunxo with Asp for regex to work. Can you see and opinion? How I put it here? I include in "Answer your question", edit mine with "Add-on" or create a new question? (will not be considered duplicate?) Thank you

  • SAM, I put with the explanations: jsfiddle.net/Georgeacsl/87vg0upe/15

  • I saw it. I don’t understand why you put ASP code in Javascript if you can get the page URL only with Javascript.

  • This is what I couldn’t, just use js with regex to process urls without Cod and with Cod, Asp was a handy way to work. (css has Obs). Can you give a hint?

  • This one: http://jsfiddle.net/87vg0upe/19/

  • The select has run out of action (no wheel) Sorry to take your time, let’s go for the last try. This way https://jsfiddle.net/87vg0upe/23/

  • 1

    The stringfor i.... made changes to: https://jsfiddle.net/87vg0upe/28/

  • Perfect, thank you very much

Show 4 more comments

Browser other questions tagged

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