О web-разработке
и даже немного больше...

Исключение пустых полей формы перед отправкой (JQuery)

jquery_logoВ сети интернет практически каждый сайт имеет html формы, которые предположительно заполняет пользователь, затем отправляет на сервер. Формы могут исполнять роль различных анкет, форм регистраций, подписки и т.д. Каждая такая форма может иметь свои правила заполнения, а так же логику проверки введенных данных пользователем. Некоторые поля формы являются обязательными, а другие нет, иными словами, может возникнуть ситуация когда параметры отправляются на сервер пустыми. В случае если форма массивная, с большим количеством вариаций полей и значений, то строка запроса при этом будет соответственно больших размеров. Особенно это заметно когда форма отправляется GET – запросом. Иногда нужно сделать так, чтобы параметры с пустыми значениями на сервер не отправлялись. В данной статье мы рассмотрим пример решения этой задачи с помощью JQuery фреймворка.

Первым делом нам необходимо подключить сам JQuery, для этого в заголовке документа между тегами head подключаем библиотеку. В данном примере файл jquery.min.js я подключаю напрямую с сайта ajax.googleapis.com, для удобства вы можете скачать его к себе на сервер, а замет подключать уже его оттуда.

…
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
…

В теле документа сделаем простую форму с двумя полями ввода текста с именами userName и phoneNum (имя пользователя и телефон), а так же кнопки «отправить». Форме зададим id равным userForm, а полям ввода значение id такое же, как и сами имена полей (значения задаёте на своё усмотрение).

<form method="get" id="userForm">
Твоё имя:<br>
<input type="text" name="userName" id="userName" /><br>
Твой телефон:<br>    
<input type="text" name="phoneNum" id="phoneNum" /><br>
<input type="submit" value="отправить" />
</form>

Далее прописываем обработчик формы, который запускается при отправке формы. Он находит нужные поля по id, затем проверяет значение поля на пустоту. В примере проверка происходит только одного поля – phoneNum. Если поле пустое, то параметр деактивируется, и не отправляется на сервер соответственно.

<script type="text/javascript">
    $(document).ready(function() {
        $("#userForm").submit(function() {
            if($("#phoneNum").val()=="") {
                    $("#phoneNum").remove();
            }
        });
     });
</script>

Как можно заметить, ничего сложного. Форма сделана для наглядного примера, по этой причине она имеет примитивный вид, в ваших проектах масштабы формы могут быть значительные, с использованием чекбоксов, множественных списков и других полей.
Так как каждая форма индивидуальна по своему, с большой вероятностью вам будет необходимо дописывать условие для своих полей.

В моём случае – нужда в исключении пустых параметров возникла при необходимости генерации ссылок, на основе существующих параметров. Т.е. после отправки формы, появлялись некие параметры «по умолчанию», к которым дописывались другие параметры.
Собственно на этом завершаю данную статью.

Опубликован: 30.09.2013 г.

См. также:

Загрузка файлов на сервер посредством Ajax
Отложенная загрузка изображений Lazy Load
Анимация набора текста на Typed.js
Анимация отсчёта на jquery-spincrement
Mega Dropdown — Меню для мобильной версии
Отслеживаем клик вне элемента на JQuery
Ajax-загрузка записей при скроллинге и нажатии кнопки
Stimed – задаем CSS-стили по времени

Комментарии

  1. Link пишет:

    А как сделать так, чтобы при нажатии кнопки пустые элементы формы не пропадали?
    при низкой скорости интернета портит дизайн

    1. htmaker пишет:

      Как вариант можно попробовать задать атрибут disabled для поля, оно будет отображаться, но будет не активным, и не будет передаваться на сервер.
      $("#phoneNum").prop("disabled",true);

  2. Link пишет:

    ага, спасибо - работает!!!

  3. Link пишет:

    А как быть если в select необходимо указывать не числа, а слова (например: один, два, три)?

    1. htmaker пишет:

      О каком select-е идет речь?

      1. Link пишет:

        Разобрался - проблема была не в вашем коде!

  4. oleg пишет:

    Всем добрый день. А если все тоже самое сделать на Javascript, т.е. необходимо проверить форму и обработчику (на сервер) отправлять только заполненные поля исключив пустые

  5. Денис пишет:

    Очень сырой пример

Добавить комментарий для oleg Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта