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

единственная причина, по которой у меня есть префикс имени поля с "empty_", заключается в том, что IE передает пустое имя в URL-адресе.

32
html html-form html-form-post javascript

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

Это мое решение для этого. Я использую Джерси и @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