Beautify URL – Filter values before submitting Form

Spread the love

Case: Say you are using pjax and your site’s search page has a form with 3 inputs (A, B and C), when user only changes value of filter C, and submit the form, your site’s URL will transform into something like:

yoursite.com/search/?filterA=&filterB=&filterC=random

Problem: Ugly URL

Solution: Filter values before submitting form

Predicted result:

yoursite.com/search/?filterC=random

Code:

$formSearch.submit(function(event) {
    var $form = $(this);
    var options = {};
    options.data = $form.find(":input").filter(function() {
        return $(this).val() !== '';
    }).serializeArray();
    $.pjax.submit(event, '#pjax-container', options);
});