Submit only non empty fields from Form

Question

That is the form:

<form action="" method="GET">
<input type="text" name="para1">
<input type="text" name="para2">
<input type="submit" value="search">
</form>

Now when I fill out only the first field I get example.com/?para1=value&para2= But I just want it to be example.com/?para1=value because para2 don't contains value. How can I do this? Should be possible with JS or anything?

Answer 1

Try this,

Include jQuery and use following snippet.

$(document).ready(function(){
    $("form").submit(function(){
        $("input").each(function(index, obj){
            if($(obj).val() == "") {
                $(obj).remove();
            }
        });
    });
});

Answer 2

Something like this would be the plain javascript version:

<form id="theform" action="" method="GET" onsubmit="return removeEmpties()">
    <input type="text" name="para1"/>
    <input type="text" name="para2"/>
    <input type="submit" value="search"/>
</form>
<script>
  function removeEmpties() {
        var form = document.getElementById("theform");
        var inputs = form.children;
        var remove = [];
        for(var i = 0; i < inputs.length; i++) {
            if(inputs[i].value == "") {
                remove.push(inputs[i]);
            }
        }

        if(remove.length == inputs.length - 1)
          return false;

        for(var i = 0; i < remove.length; i++) 
          form.removeChild(remove[i]);
        return true;
    }
</script>