Agfdhyk

I have a simple html form where I am trying to do a GET. I have few parameters in there that serve as query strings on submit. Here is the codepen: form example

When I submit the form, the action url becomeshttps://www.foo.com/?name=abc&age=20&homepage=http%3A%2F%2Flocalhost%3A8080%2Fhomepage.

When I don't give value for any one of the parameters (ex:name) in the form and submit, the url does not exclude the empty values and instead generates &name=&age=20.

Please advise if there is a way to have the action url not take the empty values on submit.

<form name="employeeForm" id="theForm" action="https://www.foo.com" method="get">

<div>

  <table>

    <tr>

      <td><b> Name: </b></td>

      <td><input name="name" id="name" value="abc" /><br/><br/></td>

    </tr>

    <tr>

      <td><b> Age: </b></td>

      <td><input name="age" id="age" value="20" /><br/><br/></td>

    </tr>

    <tr>

      <td><b> Homepage: </b></td>

      <td><input name="homepage" id="homepage" value="http://localhost:8080/homepage" /><br/><br/></td>

    </tr>



  </table><br/>

  <button>Submit</button>

</div>

It seems to me that we cannot do that with plain HTML. But it is quite easy with javascript.

This page shares a snippet which is pretty useful:

(It uses jQuery but you can easily adapt it with plain javascript)

jQuery(document).ready(function($){



  // Remove empty fields from GET forms

  $("form").submit(function() {

    $(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled");

    return true; // ensure form still submits

  });



  // Un-disable form fields when page loads, in case they click back after submission

  $( "form" ).find( ":input" ).prop( "disabled", false );



}