How to change url based on input type selected using javaScript/Jquery?

Question

I have a form

 <form name="categoryform" method="post">
 Category:<select name="category" id="category" >
 <option value="games">games</option>
 <option value="books">books</option>
 <option value="toys">toys</option>
 <option value="clothes">clothes</option>
 </select>

 Age: <select  multiple name="age" id="age" >
 <option value="5">5</option>
 <option value="10">10</option>
 <option value="15">15</option>
 </select>
 <input type="submit" name="submit" value="submit"/>
 </form>

Initially the url is http://localhost/childzone/

If I select the option books from Category the URL must change to http://localhost/childzone/books and when I select option clothes the url must be http://localhost/childzone/clothes.

If I also select age=5 from the dropdown age the url must be http://localhost/childzone/clothes&age=5. For multiple options selected i.e, if I select 5 and 10 both from age the url must be http://localhost/childzone/clothes&age=5,10.

How do I get such a URL. I am new to php, can anyone help. Thank you in advance

You want the url to change realtime when a user selects an option? You will have to do this with javascript. — Jerodev
– Jerodev, Commented Oct 9, 2014 at 9:43
I didn't find anything when I searched in google. I am not getting an idea to start. So I posted here so that I can get any idea — rjtha rjtha
– rjtha rjtha, Commented Oct 9, 2014 at 9:44
depends, do you really want to change the page if the user selects an option. Or do you just want to change the url? — Jerodev
– Jerodev, Commented Oct 9, 2014 at 9:47

Ronser · Accepted Answer · 2014-10-09 10:02:20Z

1

//on books select event use
location.replace("http://localhost/childzone/books");

//on clothes select event use
location.replace("http://localhost/childzone/clothes");

without refreshing :-

 //on books select event use
window.history.replaceState(null, "Search Results", "localhost/childzone/books")

//on books select event use
window.history.replaceState(null, "Search Results", "localhost/childzone/books")

edited Oct 9, 2014 at 10:02

answered Oct 9, 2014 at 9:50

Ronser

1,8756 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nishan Senevirathna Over a year ago

You can't do that if you change the url like this, page will get refresh and reset all the values again

TCHdvlp Over a year ago

OP isn't clear about change URL. Is it a redirection or just create an URL from options ?

rjtha rjtha Over a year ago

Its not a redirection. The page will not get refreshed and the selected values must not change only the URL must change. The selected values are maintained using cookies. I just want to change the URL

Ronser Over a year ago

the window.history.replaceState wont refresh the page. but if the user refreshes the page it'll show page not found

Ronser Over a year ago

sorry, buddy are you asking about changing the form action?? although if you could change the form action using js, dont you know that the users could turn off javascript?? then where will your form head to??

Mary Daisy Sanchez · Accepted Answer · 2014-10-09 10:35:33Z

1

These for redirection script without refreshing the page.Let me know if these works buddy

function submitnow_urlchange(){
        var cat = jQuery("#category option:selected").val();
        var age = jQuery("#age option:selected");
        var age_holder = [];
        age.each(function(){
          var el = jQuery(this);
          var hold = el.val();
          if(el.val()) age_holder.push(hold);   
        });

        var age_compile = age_holder.join(',');
        var url = cat+"&"+age_compile;
        history.pushState("", "", url);
        return false;
}

answered Oct 9, 2014 at 10:35

Mary Daisy Sanchez

1,1271 gold badge13 silver badges27 bronze badges

Comments

byJeevan · Accepted Answer · 2014-10-09 11:20:34Z

Here is one more detailed jQuery solution :

JS:

//Generate url for category
$("select[name='category']").change(function(e) {
    e.preventDefault();
    var a = "http://localhost/childzone/";
    $("div.url").append(a + this.value);
  });

  //Generate URL for the multi-select age list
  var foo = [];
  var a = "http://localhost/childzone/clothes&age=";
  var b = '';
  $("select[name='age']").change(function(e) {
    e.preventDefault();
    $("select[name='age'] :selected").each(function(i, selected) {
      foo[i] = $(selected).text();
      if (b == '') b = b + foo[i]; //if more than one option selected, seperate it by comma.
      else b = b + ',' + foo[i];
    });
    $("div.url").html(a + b); //Append URL to div for reference
    b = ''; //Clear the string holding URL.
  });

Just we need to call submit event by taking the URL which I appended on the div.url.

Complete working fiddle HERE

Mary Daisy Sanchez · Accepted Answer · 2014-10-09 10:20:52Z

Try this bro add on your form the onsubmit="submitnow()" so the function may work.Let me know if it has an issues

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function submitnow(){
        var cat = jQuery("#category option:selected").val();
        var age = jQuery("#age option:selected");
        var age_holder = [];
        age.each(function(){
          var el = jQuery(this);
          var hold = el.val();
          if(el.val()) age_holder.push(hold);   
        });

        var age_compile = age_holder.join(',');
        var url = "http://localhost/childzone/?"+cat+"&"+age_compile;
        return url;
}
</script>

<form name="categoryform" method="post" onsubmit="submitnow();">

Nishan Senevirathna · Accepted Answer · 2014-10-09 09:58:12Z

-1

This is not possible. Since if you try to change the url then page will get refresh. Then your selection will reset. You can do this by appending # or you have to maintain selected values somehow and set them again.

answered Oct 9, 2014 at 9:58

Nishan Senevirathna

7196 silver badges12 bronze badges

1 Comment

amanuel2 Over a year ago

Yes, it is. Netflix uses this method in their search bar.

Collectives™ on Stack Overflow

How to change url based on input type selected using javaScript/Jquery?

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related