asked on

<select> redirect when a item is selected

I have a <select> with some items in it. I want to reload the page with the parameter selected in the <select> box, when a item is selected.

Someone gave me this script

<script type="text/javascript" language="Javascript">
function reloadPage(pSelect)
{
if (!pSelect || pSelect.value.length == 0) return;

window.location = location.pathname + '?' + pSelect.name + '=' + pSelect.value;
}
</script>

But there is one issue left, my page already got parameters.
http://localhost/progress/index.php?p=admin&ap=manage_crafts

This function makes it to:
http://localhost/progress/index.php?recipe_type=Alchemy
instead of:
http://localhost/progress/index.php?p=admin&ap=manage_crafts&recipe_type=Alchemy

How I can fix this ?

Also note that in the reloadPage function I I tried to change:
window.location = location.pathname + '?' + pSelect.name + '=' + pSelect.value;
with:
window.location = location.pathname + location.search +'&' + pSelect.name + '=' + pSelect.value;

After one selection my link is as I want it, but after second selection it gets:
http://localhost/progress/index.php?p=admin&ap=manage_crafts&recipe_type=Alchemy&recipe_type=Engineiring
And so on.

It adds a new &recipe_type=... instead of replacing the old one.

How I can fix this please ?

Roonaan

Try:

var newLocation = location.href;
if(newLocation.indexOf("?") > -1) {
newLocation += "&" + pSelect.name + "=" + pSelect.value;
} else {
newLocation += "?" + pSelect.name + "=" + pSelect.value;
}
window.location = newLocation;

-r-

brightwood

ASKER

Same result as before.
0 selects:
http://localhost/progress/index.php?p=admin&ap=manage_crafts -------- CORRECT
1 selects:
http://localhost/progress/index.php?p=admin&ap=manage_crafts&recipe_type=Alchemy ------- CORRECT
2 selects:
http://localhost/progress/index.php?p=admin&ap=manage_crafts&recipe_type=Alchemy&recipe_type=Engineiring -------- NOT CORRECT
it should be this for 2 selects:
http://localhost/progress/index.php?p=admin&ap=manage_crafts&recipe_type=Engineiring

Roonaan

When pSelect's name always is recipy_type, then you can use:

var newLocation = location.href.replace(/recipy_type=\w+/g,'');

Alternatives would be to construct a RegExp object.

-r-

brightwood

ASKER

                       var newLocation = location.href;
                        if(newLocation.indexOf("recipe_type") > -1) {
                          newLocation = location.href.replace(/recipe_type=\w+/g,'');
                        } else {
                          newLocation += "&";
                        }
                        newLocation += pSelect.name + "=" + pSelect.value;

                        window.location = newLocation;

does what I need.

But is there a way to use pSelect instead of "recipe_type"
in newLocation.indexOf("recipe_type")
and
location.href.replace(/recipe_type=\w+/g,'');

ASKER CERTIFIED SOLUTION

Roonaan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

brightwood

ASKER

Worked, with a little modification.
var reg = new RegExp("&" + pSelect.name + "=\\w+", "gi");
instead of
var reg = new RegExp(pSelect.name + "=\\w+", "gi");

& would get duplicated every select without this little change.

Thanks a lot, you were a great help.

brightwood

ASKER

Wops just a little question.

var reg = new RegExp("&" + pSelect.name + "=\\w+", "gi");
var newLocation = location.href.replace(reg,'');

This code replace &pSelect and everything after it with '' So if I have another variable after this it gets lost.

How can I do it to replace everthing &pSelect and everthing until another & with '' ?

Roonaan

Are you sure? If i run this script below, it works fine:

<script type="text/javascript">
pSelect = {name:"b"}
var reg = new RegExp("&" + pSelect.name + "=\\w+", "gi");
var uri = "test.php?a=1&b=2&c=3";
var newLocation = uri.replace(reg,'');
document.write(newLocation);
</script>

&lt;select&gt; redirect when a item is selected

<select> redirect when a item is selected