html5 - Javascript window.location redirect with url rewriting, no querystring -


i have endlessly googled hour, please forgive me if has been asked before.

i using pure javascript , not wish use jquery.

preamble

i have html form 3 select boxes control search of items. when 1 updated, simple function reads each of values in select boxes , produces url matches our url rewriting standard.

http://www.example.com/search/select1/data1/select2/data2/select3/data3/ 

this used in a

history.pushstate 

to update browser's url address user can bookmark page right away. works fine.

problem

when user presses button of form, want function read select box values, generate url before load specific url underlying database code can return results search on page.

however, when use

window.location.href 

it loads page, sends querystring form submission. mucks database code because, essentially, it's getting data twice.

example

i choose 'a' select1, 'd' select2 , 'e' select3.

this results:

http://www.example.com/search/select1/a/select2/d/select3/e/?select1=a&select2=d&select3=e 

so...

is possible generate url in correct rewritten format, load page without querystring?

javascript

 function changepage(loadpage)     {         var theform         theform = document.getelementbyid("searchform");          var pageurl          pageurl = 'http://www.example.com/search/'          var select1 = theform.select1.value;         var select2 = theform.select2.value;         var select3 = theform.select3.value;           if(select1 != '')         {             pageurl = pageurl + 'select1/' + select1 + '/';         }          if(select2 != '')         {             pageurl = pageurl + 'select2/' + select2 + '/';         }          if(select3 != '')         {             pageurl = pageurl + 'select3/' + select3 + '/';         }          history.pushstate('data', '', pageurl);          if(loadpage=='yes')         {         window.location.href = pageurl;         }     } 

html

<form method="post" action="form.asp">     <select id="select1"><option>a</option><option>b</option></select>     <select id="select2"><option>c</option><option>d</option></select>     <select id="select3"><option>e</option><option>f</option></select>     <button onclick="changepage('yes');"> </form> 


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -