Question

我有输入字段的HTML表单。一些输入可以为空，即值为“”。

<input name="commentary" value="">

刚才，当commentary字段未设置时，它会显示在提交网址中：&commentary=

如何从提交网址中删除空输入，因此当commentary输入为空时，根本不会传递。

非常感谢。

更新

感谢 minitech 回答，我可以解决它。 JavaScript代码如下：

$('#my-form-id').submit(function() {
  var commentary = $('#commentary').val(); 
  if (commentary === undefined || commentary === "") {
    $('#commentary').attr('name', 'empty_commentary');
  } else {
    $('#commentary').attr('name', 'commentary');        
  }
});

我的前缀字段名称为“empty_”的唯一原因是IE无论如何都在URL中传递空名。

Answer 1

据我所知，这只能通过JavaScript完成，所以如果您依赖此功能，则需要进行重组。无论如何，这个想法是从您不想包含的输入中删除name属性：

jQuery的：

$('#my-form-id').submit(function () {
    $(this)
        .find('input[name]')
        .filter(function () {
            return !this.value;
        })
        .prop('name', '');
});

没有jQuery：

var myForm = document.getElementById('my-form-id');

myForm.addEventListener('submit', function () {
    var allInputs = myForm.getElementsByTagName('input');

    for (var i = 0; i < allInputs.length; i++) {
        var input = allInputs[i];

        if (input.name && !input.value) {
            input.name = '';
        }
    }
});

如果您使用侦听器并取消，则可能还需要在之后重置表单。

Answer 2

您可能不想匹配单选按钮。如果表单包含select，则还需要匹配它们。

使用jQuery，您可以使用以下内容：

$('#form-id').submit(function() {
    $(this).find('input[type!="radio"][value=""],select:not(:has(option:selected[value!=""]))').attr('name', '');
});

Answer 3

不使用submit类型输入，而是使用button - 类型输入进行表单提交。 button - 类型输入的JavaScript处理程序应在检查注释非空后调用表单的submit()方法。您还应该提醒用户他们的错误（更好的是在页面上显示红色文本而不是alert()生成的弹出文件）。

请记住，您不应仅依赖单独进行客户端输入验证，因为始终可以从修改后的页面或直接在HTTP中发送表单。

Answer 4

我宁愿不更改输入元素（更改它们的名称或将其标记为禁用等），因为如果您回过头，则可能会损坏表格。

这是我的解决方案，它依靠FormData：

window.addEventListener('load', function() {
  let forms = document.getElementsByClassName('skipEmptyFields');
  for (let form of forms) {
    form.addEventListener('formdata', function(event) {
      let formData = event.formData;
      for (let [name, value] of Array.from(formData.entries())) {
        if (value === '') formData.delete(name);
      }
    });
  }
});

Answer 5

Thankyou @Ryan

这是我的完整解决方案。我使用Jersey和@BeanParam，这解决了“＆amp; and空输入

$('#submitForm').click(function() {
    var url = "webapi/?";       
    var myForm = document.getElementById('myFormId');
    var allInputs = myForm.getElementsByTagName('input');

    for (var i = 0; i < allInputs.length; i++) {
        var input = allInputs[i];
        if (input.value != "" && input.name != "submitForm") {              
            url += input.name +'='+input.value+'&';
        }

    }
    console.log(url);

    $.ajax({
        method : "GET",
        url : url,

        data : {
        // data : "json",
        // method: "GET"
        },
        success : function(data) {
            console.log("Responce body from Server: \n" + JSON.stringify(data));
            $("#responce").html("");
            $("#responce").html(JSON.stringify(data));
        },
        error : function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus);

            console.log('Error: ' + errorThrown);

        }
    });
});

如果为空，则如何阻止提交HTML表单的输入字段值

更新

5 个答案: