Question

i’ve already opened a question for this problem, but it was very bad formulated and because of that i did not get a good response…. so heres another try… hope it’s ok

---

i have a form with a selected tag and some options inside

<form>
  <select>
     <option selected="selected"></option>
     <option value="1" data-seourl="food-intake">Food intake</option>
     <option value="2" data-seourl="homemade-cake">Homemade cake</option>
     <option value="3" data-seourl="good-fruits">Good fruits</option>
     <option value="4" data-seourl="apple-type">Apple type</option>
  </select>
</form>

When i select an option (onchange) i want to submit a friendly url to the server that ressembles this:

http://www.mywebsite/kitchen/food-intake.1
http://www.mywebsite/kitchen/homenade-cake.2
...

instead of sending the default:

http://mywebsite/kitchen/?category=1
http://mywebsite/kitchen/?category=2

I know how to use mod_rewrite, so that’s not a problem. I need to understand how to submit a friendly url instead of the default?

Is javascript (jQuery in this case) the only solution or is there a native solution?

Thanks

Answer 1

Try this:

$('select').change(function()
{
    var $option = $(this).find('option:selected');
    if ($option.length)
    {
        window.location.href = 'http://www.mywebsite/kitchen/'+
                               $option.attr('data-seourl')+'.'+
                               $option.attr('value');
    }
});

Note: It’s not technically a <form> submit, but that really all you can reasonably do since the form is going to try to append the query string you don’t want. Both methods produce a HTTP GET request, though.