CODEWITHSUNDEEP
javascript
PLazzo
PLazzo

Reputation: 169

Change link parameter as select form changes

I want to display 5 url links in a page, and I want a form with 3 select fields which will change url parameters according their selection.

For example:

SELECT color: red / blue / green
SELECT size: small / medium / large
SELECT condition: new / used

So user specify values for the 3 select fields.

Below selects, I will have 5 different URL links, which will get parameters from select fields.

Example:

http://link-1.com/?color=xxx&size=yyy&condition=zzz
http://link-2.com/?color=xxx&size=yyy&condition=zzz
http://link-3.com/?color=xxx&size=yyy&condition=zzz
http://link-4.com/?color=xxx&size=yyy&condition=zzz
http://link-5.com/?color=xxx&size=yyy&condition=zzz

I need the url links changed automatically when user select field values. The xxx / yyy / zzz will be modified in to get field value, therefore after user select each option the parameters are changed on the fly, for example if user select "red / large / new" the urls must be: 

http://link-1.com/?color=red&size=large&condition=new
http://link-2.com/?color=red&size=large&condition=new
http://link-3.com/?color=red&size=large&condition=new
http://link-4.com/?color=red&size=large&condition=new
http://link-5.com/?color=red&size=large&condition=new

So the links will be ready to be clicked according user's choice.

How to do this?

Upvotes: 0

Views: 112

Answers (1)

Sven Eberth
Sven Eberth

Reputation: 3115

You could use Javascript + jQuery

<select name="color" class="color">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>
<select name="size" class="size">
    <option value="small">small</option>
    <option value="medium">medium</option>
    <option value="large">large</option>
</select>

<select name="condition" class="condition">
    <option value="new">New</option>
    <option value="used">Used</option>
</select>

<a href="#" class="link1">Link 1</a>
<a href="#" class="link2">Link 2</a>
<a href="#" class="link3">Link 3</a>

<script>
    $(function() {
        $('#´.color, .size, .condition').change(function() { 
            var color = $('.color').val();
            var size = $('.size').val();
            var condition = $('.condition').val();

            var link1 = 'http://link-1.com/?color=' + color + '&size=' + size + '&condition=' + condition;
            var link2 = 'http://link-2.com/?color=' + color + '&size=' + size + '&condition=' + condition;
            var link3 = 'http://link-3.com/?color=' + color + '&size=' + size + '&condition=' + condition;

            $('.link1').attr('href', link1);
            $('.link2').attr('href', link2);
            $('.link3').attr('href', link3);
        });
    });
</script>

Not tested, but it should works.

Upvotes: 1

Related Questions