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, Oct 09 '14 at 09: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, Oct 09 '14 at 09: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, Oct 09 '14 at 09:47
content is already changing. I have done that part in jquery. Now I am trying to get the URL dynamically @jerodev — rjtha rjtha, Oct 09 '14 at 09:57
OP talked about multiple option. That make me think he only need a "redirect" button and no javascript. A simple form will do the thing in a clean way. IMO this must be made server side. `EDIT` : You must precise what is "change url". Is it a instant redirection ? — TCHdvlp, Oct 09 '14 at 09:58

Ronser · Accepted Answer · 2014-10-09T10:02:20.010

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 09 '14 at 10:02

answered Oct 09 '14 at 09:50

Ronser

1,855
6
20
38

You can't do that if you change the url like this, page will get refresh and reset all the values again – Nishan Senevirathna Oct 09 '14 at 09:55
OP isn't clear about change URL. Is it a redirection or just create an URL from options ? – TCHdvlp Oct 09 '14 at 09:59
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 – rjtha rjtha Oct 09 '14 at 10:02
the window.history.replaceState wont refresh the page. but if the user refreshes the page it'll show page not found – Ronser Oct 09 '14 at 10:07
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?? – Ronser Oct 09 '14 at 10:15

score 1 · Answer 2 · answered Oct 09 '14 at 10:35

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;
}

score 1 · Answer 3 · answered Oct 09 '14 at 11:20

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

score 0 · Answer 4 · answered Oct 09 '14 at 10:20

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();">

score -1 · Answer 5 · answered Oct 09 '14 at 09:58

-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 09 '14 at 09:58

Nishan Senevirathna

709
5
12

Yes, it is. Netflix uses this method in their search bar. – amanuel2 Oct 18 '20 at 05:36

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

5 Answers5