Update or replace URL parameters using jquery based on select option

Question

I have 3 select box for seller,skills and city

For seller

<select data-placeholder="Select Seller..." class="sellereselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

For skills

<select data-placeholder="Select skills..." class="sellereselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

For city

<select data-placeholder="Select city..." class="sellereselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

I want if any one select seller than url redirect to

www.test.com/?seller=test1

If any one select seller and city than url redirect to

www.test.com/?seller=test1&skills=test1

if parameters already in url than it will update value in parameters.

I have tried most things like window replace, changes event for select box but nothing help me!! please any one help me !!

Do you want this to happen once the form is submitted or do you want it to happen instantly? — Epodax
– Epodax, Commented Sep 29, 2015 at 9:26
Give name to the form elements and submit form using GET method. Validate form fields at server end. — Rayon
– Rayon, Commented Sep 29, 2015 at 9:27

Wesley Smith · Accepted Answer · 2015-09-29 10:08:54Z

I would set a data attribute on each select like data-param="city" then loop through them like the below.

Note the encodeURIComponent() in the js, without it, options whose values contain characters like "&", "?", "/", "=", etc would break the code, like option 4 in the 2nd select box.

$('.sellereselect').change(function(){
    var params =[];
    $('.sellereselect').each(function(){
        $this=$(this);
        if(!$this.val()=='') params.push($this.data('param')+'='+encodeURIComponent( $this.val() ));
    });
    $('#urlDislay').text('www.test.com/?'+params.join('&')); // for display
    // windox.location = 'www.test.com/?'+params.join('&'); // for you actual use
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
For seller
<select data-placeholder="Select Seller..." class="sellereselect" data-param="seller"> 
   <option></option>
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

<br>
For skills
<select data-placeholder="Select skills..." class="sellereselect" data-param="skills"> 
   <option></option>
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test&4</option> <!-- note the encodeURIComponent() in the js, without it this option would break the code -->
</select>
<br>
For city
<select data-placeholder="Select city..." class="sellereselect" data-param="city"> 
   <option></option>
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>
<br>
<br>
<div id="urlDislay">www.test.com/?</div>

Man Programmer · Accepted Answer · 2015-09-29 10:21:56Z

3

check this

$('.sellereselect').change(function(){
      
      var url = "http://www.test.com/?";
      
      if($("#seller").val()!='Select')
        url+='seller='+encodeURIComponent($("#seller").val())+'&';
      
      if($("#skill").val()!='Select')
        url+='skill='+encodeURIComponent($("#skill").val())+'&';
      
      if($("#city").val()!='Select')
        url+='city='+encodeURIComponent($("#city").val());
      
      url = url.replace(/\&$/,'');
      alert(url);
      window.location.href=url;
      
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="seller" data-placeholder="Select Seller..." class="sellereselect"> 
      <option>Select</option>
       <option value="test1&1">test1&1</option>
       <option value="test2">test2</option>
       <option value="test3">test3</option>
       <option value="test4">test4</option>
    </select>

    <select id="skill" data-placeholder="Select Seller..." class="sellereselect"> 
       <option>Select</option>
       <option value="test1">test1</option>
       <option value="test2">test2</option>
       <option value="test3">test3</option>
       <option value="test4">test4</option>
    </select>

    <select id="city" data-placeholder="Select Seller..." class="sellereselect"> 
       <option>Select</option>
       <option value="test1">test1</option>
       <option value="test2">test2</option>
       <option value="test3">test3</option>
       <option value="test4">test4</option>
    </select>

edited Sep 29, 2015 at 10:21

answered Sep 29, 2015 at 9:35

Man Programmer

5,3662 gold badges24 silver badges21 bronze badges

2 Comments

Wesley Smith Over a year ago

@dp4solve Be careful, options with special chars like <option value="">Jack & Jill</option> will break this. Maybe not an issue, but a pain to debug later if not considered :)

dp4solve Over a year ago

Thanks @Man i have tested your suggestion and its working :)

Ranjana · Accepted Answer · 2015-09-29 09:41:06Z

0

The js for onchange event is below

$('.sellereselect').change(function(){
    var type=$(this).attr('data-type');
    var data="";
    if(type="seller" && $('#sellerselect option:selected').val()!="")
        data='seller='+$('#sellerselect option:selected').val()+'&';
    if(type="skills" && $('#skillsselect option:selected').val()!="")
        data=data+'skills='+$('#skillsselect option:selected').val()+'&';
    if(type="city" && $('#cityselect option:selected').val()!="")
        data=data+'city='+$('#cityselect option:selected').val();
    window.location='www.test.com/?'+data;
});

And the updated html is

<select data-placeholder="Select Seller..." class="sellereselect" data-type="seller" id="sellerselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

<select data-placeholder="Select skills..." class="sellereselect" data-type="skills"  id="skillsselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

<select data-placeholder="Select city..." class="sellereselect" data-type="city"  id="cityselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

answered Sep 29, 2015 at 9:41

Ranjana

8255 silver badges10 bronze badges

1 Comment

Wesley Smith Over a year ago

You dont need all those if statements. You already have the data-type' attribute, in your type` variable. Just call if($(this).val()!='') data = type + $(this).val() But note that you code will only set one parameter, I believe the OP wants multiple parameters to be set, but maybe Im wrong

Collectives™ on Stack Overflow

Update or replace URL parameters using jquery based on select option

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related