Как предотвратить отправку значения поля ввода формы HTML, если оно пустое

У меня есть HTML-форма с полями ввода. Некоторые из входов могут быть пустыми, то есть значение равно "".

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

Как раз сейчас, когда поле commentary не задано, оно появляется в URL-адресе отправки, например: &commentary=

Как я могу удалить пустые входы из URL-адреса отправки, поэтому, когда вход commentary пуст, он не будет передан вообще.

Большое спасибо.

Update

Благодаря ответу 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.

Ответ 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 = '';
        }
    }
});

Вы также можете сбросить форму после этого, если вы используете слушателя и отмените.

Ответ 2

Вместо использования ввода типа submit используйте вход типа button для представления формы. Обработчик JavaScript для ввода типа button должен вызвать метод формы submit() после проверки того, что комментарий не пуст. Вы должны также предупредить пользователя об их ошибке (лучше с красным текстом на странице, а не всплывающим окном, созданным alert()).

Помните, что вы не должны полагаться исключительно на проверку на стороне клиента, хотя так как всегда можно отправить форму с измененной страницы или непосредственно в HTTP.

Ответ 3

Вероятно, вы не хотите, чтобы переключатели переключались. И если форма содержит select, вам также нужно будет сопоставить их.

С помощью jQuery вы можете использовать что-то вроде этого:

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

Ответ 4

Спасибо @Ryan

Это мое полное решение для этого. Я использую Джерси и @BeanParam, и это решает проблему "" и нулевых входов

$('#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);

        }
    });
});