Подтвердить что ты не робот

Jquery: как удалить пустые поля из формы перед отправкой?

У меня есть страница с набором форм на ней, используемая для тестирования API. По причинам, которые не стоит объяснять, я вообще не хочу включать пустые поля в отправку на сервер. Как удалить пустые поля из данных перед отправкой?

Например, если у меня есть форма с двумя полями: foo и bar, а пользователь оставляет пустую строку, я хочу, чтобы сервер видел представление, как будто единственным полем было foo.

Мой первый удар при этом включал цикл через поля, используя jquery с

$("form").submit(function() {
    $(this).children(':input').each(...)
}

И удаление поля. Но то, что а) не работает, и б) похоже, что он удалит поле из видимой формы на странице, что не то, что я хочу.

Другим подходом может быть цикл через поля и построение строки отправки вручную с полями, которые имеют значения, отличные от "". Будет ли это работать? Любые лучшие идеи?

4b9b3361

ОТВЕТЫ

Ответ 1

Один из способов - установить атрибут "disabled" в этих полях, что не позволяет их значения сериализоваться и отправляться на сервер:

$(function()
{
    $("form").submit(function()
    {
        $(this).children(':input[value=""]').attr("disabled", "disabled");

        return true; // ensure form still submits
    });
});

Если у вас есть проверка на стороне клиента, вы также захотите повторно включить эти поля в случае сбоя проверки:

$(':input').removeAttr("disabled");

EDIT: исправлена ​​ошибка

Ответ 2

Объединив ответы здесь, этот вопрос, касающийся поиска пустого ввода, я пришел к этому решению.

$(function() {
   $("form").submit(function() {
      $(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled");
      return true; // ensure form still submits
    });
});

Итак, начинает форму @Luke, добавляет его предложение использовать find вместо детей (моя форма находится в таблице), а затем использует метод фильтрации @gdoron для выделения пустых элементов.

Ответ 3

Я обычно соглашусь с @Luke, но нижеприведенное решение должно заботиться о любом пустом значении, независимо от того, является ли он входным тегом или нет, просто не забудьте добавить свойство имени во все ваши дочерние элементы формы, если вы хотите их для сериализации;

HTML:

<form action="yourUrl.php" name="myForm" id="myForm">
input1: <input type="text" name="field1" /><br /><br />
input2: <input type="text" name="field2" /><br /><br />
input3: <input type="text" name="field3" /><br /><br />
input4: <input type="text" name="field4" /><br /><br />
select: <select name="selectField">
    <option value="">empty value</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
</select><br /><br />
<input type="submit" name="submit" value="submit" />
</form>

jQuery:

$("#myForm").submit (function (e) {
    e.preventDefault();
    var _form = $(this);
    var data = {};
    var formData = _form.serializeArray();
    $.each(formData, function (index, value) {
        var data_name = formData[index].name;
        var data_value = formData[index].value;
        if (data_value !== "") {
            data[data_name] = data_value;
        }
    });
    // now with ajax you can send the sanitize data object
    $.post(_form.attr("action"), data, function(res, textStatus, jqXHR) {
        // do something
    });
});

Ответ 4

Возможно, это не лучшее решение, но это должен быть быстрый и простой способ добиться того, что вы после

$("form").submit(function() {
    $(this).children('input[value=""]').each(function(){
        // Rename the name attribute to something else if the value is "" to it isn't submitted
        $(this).attr('blank', $(this).attr('name'));
        $(this).removeAttr('name');

    });
}

Затем, если вы используете проверку стороны vlient или отправляете через ajax, вам нужно установить атрибут name, чтобы следующая публикация работала правильно...

$(this).attr('name', $(this).attr('blank'));
$(this).removeAttr('blank');

Ответ 5

Высший проголосовавший ответ не сработал у меня. Я считаю, что селекционеры были достаточно конкретными. Вот то, что сработало для меня:

$(function() {
  $("#myForm").submit(function() {
    $("#myForm *").filter(":input").each(function(){
      if ($(this).val() == '')
        $(this).prop("disabled", true);
    });

    return true; // ensure form still submits
  });
});

Ответ 6

Удаление пустых полей при отправке

$(function() {
    $('form').submit(function () {
        var $empty_fields = $(this).find(':input').filter(function () { 
            return $(this).val() === '';
        });
        $empty_fields.prop('disabled', true);
        return true;
    });
});

Объединяя несколько функций и субъективных стилей, особенно: