Добавление и контроль input полей в форму JavaScript

Быстрый ответ

Для исключения элемента ввода из процесса отправки формы можно воспользоваться JavaScript, отключив его непосредственно перед отправкой:

document.querySelector('form').onsubmit = function() {
  document.querySelector('#excludeInput').disabled = true;
};

Этот метод исключит данные из элемента с id #excludeInput при сериализации формы.

Также можно просто не задавать атрибут name для конкретного элемента:

<input type="text" id="excludeInput">

Без атрибута name информация из элемента ввода не будет отправляться.

Расширяем возможности

Сделайте элементы управления формой информативными Если элемент ввода исполняет исключительную информационную роль, можно сделать его доступным только для чтения:

<input type="text" id="excludeInput" readonly>

Таким образом, пользователь сможет скопировать данные, но не сможет изменить их или отправить.

Работа с динамичными формами Управление динамически добавленными полями можно реализовать на JavaScript следующим образом:

$('form').on('submit', function() {
  $('#excludeInput').remove();
});

Этот код удаляет элемент ввода из DOM непосредственно перед отправкой формы.

Хранение данных формы на стороне клиента Для работы с сериализованными данными формы на стороне клиента можно избегать добавления отдельных элементов:

$('form').on('submit', function(e) {
  e.preventDefault();
  var formData = $(this).serializeArray().filter(function(item) {
    return item.name !== 'excludeInput';
  });
  $.ajax({
    url: this.action,
    type: this.method,
    data: formData,
    success: function(response) {
      // Здесь обработка ответа сервера
    }
  });
});

Визуализация

Представьте себе конвейер на производстве, где каждая коробка символизирует поле формы:

Конвейер: 📦📦🔴📦📦 -> 🚚 (Отправка формы)

Коробка с красной пометкой (🔴) не отправляется:

До:     📦📦🔴📦📦
После:  📦📦   📦📦 -> 🚚

Коробка с красной пометкой символизирует поле ввода, которое не будет отправлено.

$('form').on('submit', function(){
   $(this).find('.do-not-ship').prop('disabled', true);
});

Только поля, не указанные для отправки, попадут в форму.

Погружение поглубже

Эффективное управление макетом форм Используйте CSS для сохранения внешнего вида формы при скрытии или удалении полей:

.input-hidden {
  visibility: hidden;
  position: absolute;
}

Обеспечиваем доступность интерфейса Продумайте доступность форм так, чтобы отключенные поля корректно взаимодействовали со скринридерами и не ухудшали пользовательский опыт.

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

Полезные материалы

1. HTMLFormElement: событие submit – Web APIs | MDN — Детальное объяснение механизма перехвата события отправки формы с помощью JavaScript.
2. preventDefault() Event Method — Как предотвратить стандартное поведение браузера (например, отправку формы) с использованием метода preventDefault().
3. event.preventDefault() | jQuery API Documentation — Разъяснение использования метода preventDefault() в jQuery для предупреждения автоматической отправки формы.
4. Как предотвратить отправку формы нажатием Enter – Stack Overflow — Методы предотвращения неумышленной отправки формы при нажатии клавиши Enter.
5. Тег input в HTML — Обзор работы тега <input> и его возможностей по управлению отправкой форм.
6. Валидация форм на стороне клиента – Учебник по веб-разработке | MDN — Руководство по реализации валидации форм на стороне клиента.
7. Разница между <input type='button' /> и <input type='submit' /> – Stack Overflow — Отличие между кнопкой отправки формы и обычной кнопкой.