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

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

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

Только что, когда поле commentary Не задано, оно появляется в URL отправки следующим образом: &commentary=

Как я могу удалить пустые входные данные из URL отправки, так что когда 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');        
  }
});

В единственная причина, у меня префикс имени Поля "не установлено_" заключается в том, что т. е. все равно проходит пустое имя в URL-адресе.

4 32
javascript html html-form html-form-post

4 ответа:

Насколько я знаю, это можно сделать только с помощью 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');

myFrm.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 = '';
        }
    }
});

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

37

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

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

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

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

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

2

Спасибо @Ryan

Это мое полное решение для этого. Я использую Jersey и @BeanParam, и это устраняет проблему "" & null inputs 
$('#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);

        }
    });
});
0