How to send form without blank params

Question

I have so form:

<form>
  <input type='text' name='first_name' value='anisim'>
  <input type='number' name='phone' value='12345'>
  <input type='submit'>
</form>

When i press sumbit, i send get-request to

localhost/?first_name=anisim&phone=12345

When i clear field "phone" and press submit, i send get-request to

localhost/?first_name=anisim&phone=

I want to remove blank params from query and send get-request to

localhost/?first_name=anisim

I found variants jQuery remove() inputs or set them disabled, but if user press "back" button, previous form will be crush (inputs will be disabled or removed)

The same problem if user press submit and stop loading process - he couldn't input phone and press submit again - that field will be disabled or removed.

How to solve it?

Answer 1

If it's a get request, just serialize the inputs with values and redirect using the serialized string:

var queryString = $("form :input[value!='']").serialize();
window.location.href = 'localhost/?' +  queryString;