Question

I’ve replaced the submit URL from the search form with this jQuery snippet:

<script type="text/javascript">
$(document).ready(function() {
    $('.search-form').submit(function() {
        window.location.href = "/search-" + $('.search-form input:text').val() + "-" + "keyword"+ "-"+ "keyword2/" + $('.search-form input:text').val() + ".html";
     return false;
    });
});
</script>

This works fine and turns the URL into a nice SEO cleaned URL. But how can I replace the spaces?

When someone types in “search me” the URL looks like /search-search me-keyword-keyword2/search me.html with spaces. With + or – it would look much better. I know of str_replace from PHP, but how would I go about this in jQuery?

Answer 1

Method 1: Using Replace

<script type="text/javascript">
$(document).ready(function() {
    $('.search-form').submit(function() {

        var value = $('.search-form input:text').val();
        value = value.replace(' ', ''); // replace

        window.location.href = "/search-" + value + "-" + "keyword"+ "-"+ "keyword2/" + value + ".html";
     return false;
    });
});
</script>

Method 2: Encoding URL

<script type="text/javascript">
$(document).ready(function() {
    $('.search-form').submit(function() {

        // encode url
        var value = encodeURIComponent($('.search-form input:text').val());

        window.location.href = "/search-" + value + "-" + "keyword"+ "-"+ "keyword2/" + value + ".html";
     return false;
    });
});
</script>

Note that replace method would work even in JQuery because Jquery is simply library of javascript 🙂