Форма отправки с параметрами запроса

Question

У меня есть простая форма HTML, где я пытаюсь сделать GET. У меня есть несколько параметров там, которые служат строкой запроса при отправке. Вот кодовая ручка: пример формы

Когда я отправляю форму, URL-адрес действия становится https://www.foo.com/?name=abc&age=20&homepage=http%3A%2F%2Flocalhost%3A8080%2Fhomepage.

Когда я не даю значения ни одному из параметров (например, name) в форме и не отправляю, URL-адрес не исключает пустые значения, а вместо этого генерирует &name=&age=20.

Пожалуйста, сообщите, если есть способ, чтобы URL-адрес действия не принимал пустые значения при отправке.

<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>

Answer 1

Мне кажется, что мы не можем сделать это с простым HTML. Но с Javascript это довольно просто.

На этой странице есть фрагмент, который очень полезен:
(Он использует jQuery, но вы можете легко адаптировать его с простым 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 );

}