带有查询参数的表单提交

时间:2018-11-08 09:15:29

标签: javascript html forms

我有一个简单的html表单,我正在尝试执行GET。我那里有几个参数可以用作提交时的查询字符串。这是代码库:form example

提交表单时,操作网址将变为https://www.foo.com/?name=abc&age=20&homepage=http%3A%2F%2Flocalhost%3A8080%2Fhomepage

当我不给表单中的任何一个参数(例如:名称)赋值时,URL不会排除空值,而是生成&name=&age=20

请告知是否有一种方法可以使操作网址在提交时不使用空值。

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

1 个答案:

答案 0 :(得分:1)

在我看来,我们无法使用纯HTML做到这一点。但是使用javascript很容易。

This page共享一个非常有用的代码段:
(它使用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 );

}