url restructure or rewrite having $_GET variables

Question

I am currently trying to rewrite or restructure a url.. I have three search fields, after fullfiling it when user click search it takes you to oter page and link forms like

"http://goasquare.com/jobs/?keywords=res&categories%5B%5D=44&location=goa&search_region=&submit=&filter_job_type%5B%5D="

i just want to restructure it like below url http://goasquare.com/jobs/%keyword%/%category%/%location%

i have tried many solutions but not workin , please help me

Answer 1

From what I understand you are after pretty URLs for your form GET sending form. There are two steps involved here.

First you need to prevent the default behaviour of submit form buttons: grabbing the <form> action attribute (e.g. <form action="http://foo.com">) and adding to it the values of the inputs as URL parameters (GET parameters). You need to use JavaScript for this - see this question and its answers.

Now that you have the friendly URL and redirecting to it, you need to "help" WordPress make sense of it. So, secondly, you need to add a new rewrite rule that will map the URL to variables as needed by your server-side logic. This code should get you started (I assumed the slug of your page is jobs):

add_rewrite_rule( '/jobs/([^/]+)/([^/]+)/([^/]+)/?$', 'index.php?pagename=jobs&keywords=$matches[1]&categories=$matches[2]&location=$matches[3]', 'top' );

Here is starter JavaScript for you to get going (it is based on jQuery, not vanilla JS):

<script type="text/javascript">
(function($) {
    $(window).load(function(){
        var $form = $("#someform");
        $form.on('submit', function(event) {
          event.preventDefault();
          // Create the new URL
          var new_url = $form.attr('action') + "/" + encodeURIComponent($form.find("input[name=keywords]").first().val()) + "/" + encodeURIComponent($form.find("input[name=categories]").first().val()) + "/" + encodeURIComponent($form.find("input[name=location]").first().val()) + "/";
          // This alert is just to help you see the URL - delete it when no needed
          alert(new_url);

          // Now we will redirect to the URL
          window.location.replace(new_url);

          // We need to return false to stop the normal form submission
          return false;
        });
    });
})(jQuery);
</script>

If you find it easier, here is the jsfiddle for the code above.