Form Get Method: prevent empty fields from submittion in query string

Question

I am developing a search form.

Search Form has 2 parts, First simple search with some select, input, and submit button. Second contains many select, check box, radio, input and submit button.

I am using GET method as i want all fields in query string like. example.com/cars-parts/cars-for-sale/?country=205&city=19&cars_category=462

But the issue is if user don't select some fields(because he donot want to apply this criteria) a lot of empty fields and make query string too long.

Problem:

I want to remove (disable or whatever needed) all empty fields before form submission, so that query string includes only fields having value.

NOTE: Only suggest using Form Get Method. In Past i was using POST method and no values were passed in query string, but now i want values in query string.

Thank you for reading.

Answer 1

You can bind a function on the form submit event and remove/disable all input with an empty value. Like this :

your_form.submit(function() {
    your_form.find('input').each(function() {
        var input = $(this);
        if (!input.val()) {
            input.remove(); // or input.prop('disabled', true);
        }
    });
});