В сети интернет практически каждый сайт имеет 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>
Как можно заметить, ничего сложного. Форма сделана для наглядного примера, по этой причине она имеет примитивный вид, в ваших проектах масштабы формы могут быть значительные, с использованием чекбоксов, множественных списков и других полей.
Так как каждая форма индивидуальна по своему, с большой вероятностью вам будет необходимо дописывать условие для своих полей.
В моём случае – нужда в исключении пустых параметров возникла при необходимости генерации ссылок, на основе существующих параметров. Т.е. после отправки формы, появлялись некие параметры «по умолчанию», к которым дописывались другие параметры.
Собственно на этом завершаю данную статью.
А как сделать так, чтобы при нажатии кнопки пустые элементы формы не пропадали?
при низкой скорости интернета портит дизайн
Как вариант можно попробовать задать атрибут disabled для поля, оно будет отображаться, но будет не активным, и не будет передаваться на сервер.
$("#phoneNum").prop("disabled",true);
ага, спасибо - работает!!!
А как быть если в select необходимо указывать не числа, а слова (например: один, два, три)?
О каком select-е идет речь?
Разобрался - проблема была не в вашем коде!
Всем добрый день. А если все тоже самое сделать на Javascript, т.е. необходимо проверить форму и обработчику (на сервер) отправлять только заполненные поля исключив пустые
Очень сырой пример