ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Усовершенствование простой формы заказа

Усовершенствование простой формы заказа

Данное руководство позволит нам усовершенствовать простую форму заказа, состоящую из элементов для ввода информации по платежу и доставке. Во-первых, мы поместим текстовый курсор в первое текстовое поле формы при загрузке страницы. Во-вторых, отключим и вновь включим элементы формы в соответствии с выбором посетителя. Наконец, мы скроем целый раздел формы, когда он окажется ненужным.

Фокусировка на элементе формы

В первое текстовое поле бланка-заказа в нашем примере вводится имя лица, размещающего заказ. Для удобства пользователя текстовый курсор должен находиться в этом поле при загрузке страницы.

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

$(document).ready(function(){    
$(":text:first").focus(function(e) {
    
});
});

Данный код выбирает первое текстовое поле и применяет к нему функцию focus(). В результате при загрузке страницы браузер поме­щает текстовый курсор в данное поле.

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

Отключение элементов формы

Сейчас нам предстоит выключить или включить два элемента формы в ответ на выбор, сделанный посетителем. Если вы просмотрите форму в браузере, то увидите, что в конце раздела с платежной информацией есть три переключателя для выбора способа платежа: РауPal, Visa и MasterCard. Кроме того, есть два поля для ввода номера платежной карты и срока ее действия. Эти две настройки применимы только к платежным картам, но не к платежам с помощью системы Рау Pal, поэтому мы должны отключить данные настройки, если переключатель установлен в положение РауPal.

НТМL-код для этого раздела страницы выглядит так:


<div class="label"><span class="label">Способ оплаты: </span>
<input type="radio" name="payment" id="paypal" value="paypal">
<label for="paypal">PayPal</label>
<input type="radio" name="payment" id="visa" value="visa">
<label for="visa">Visa</label>
<input type="radio" name="payment" id="mastercard" value="mastercard">
<label for="mastercard">Mastercard</label>
</div>
<div id="creditCard" class="indent">
<div>
<label for="cardNumber" class="label">Номер карты</label><br>
<input type="text" name="cardNumber" id="cardNumber"><br>
</div>
<div>
<label for="expiration" class="label">Срок действия</label><br>
<input type="text" name="expiration" id="expiration"><br>
</div>
</div>

Для начала присвоим функцию событию щелчка для переключателя РауPal.

$(document).ready(function(){    
$(":text:first").focus(function() {
 $("#paypal").click(function(e) {
    
});   
});
});

Переключатель для способа платежа РауPal имеет идентификатор paypal, таким образом, для выбора этого поля достаточно написать:$('#paypal'). Остальная часть кода присваивает анонимную функцию событию щелчка. Иначе говоря, установка переключателя в положение РауPal не только осуществляет выбор способа, но и запускает функцию, которую мы создадим далее.

Теперь мы отключим поля для ввода номера платежной карты и срока ее действия, поскольку эти данные не применимы, если выбран вид платежа PayPal.

Задачу отключения двух элементов формы можно легко решить с помощью одной строки кода. Оба поля расположены внутри элемента div с идентификатором creditCard.. Поэтому селектор $('#creditCard input') означает "Выбрать все элементы input формы внутри элемента с идентификатором creditCard". Этот гибкий подход обеспечивает выбор всех полей ввода, так что при добавлении еще одного поля ввода, например, CVV ( три цифры на обратной стороне карты, которые могут требоваться для обеспечения безопасности транзакции), оно также будет выделено.

Чтобы отключить элементы формы, нам остается задать значение true для атрибута disaЬled. Однако это действие не затрагивает названия полей ("Номер карты" и "Срок действия"). Хотя сами поля деактивированы, названия элементов формы попрежнему выделены ярким полужирным шрифтом, давая пользователю ложный сигнал о том, что поля доступны для заполнения. Для наглядной демонстрации неактивного состояния элементов формы следует изменить цвет их названий на светло-серый. Вместе с этим вы поменяете фоновый цвет полей на серый, чтобы они выглядели неактивными.

$(document).ready(function(){    
$(":text:first").focus(function() {
 $("#paypal").click(function(e) {
  $("#creditCard input").prop("disabled",true).css('backgroundColor','#BDB9B9');
  $("#creditCard label").css("color","#BBB");  
});   
});
})

Если мы теперь просмотрим страницу в браузере, то увидим, что установка переключателя в положение РауPal приводит к тому, что поля и их названия "Номер карты" и "Срок действия" становятся тусклыми. Однако если установить переключатель в положение Visa или MasterCard, соответствующие элементы формы остаются неактивными! Вам нужно вновь обеспечить их включение при установке переключателя в любое из этих положений.

$("#visa, #mastercard").click(function(e) {
  $("#creditCard input").prop("disabled",false).css('backgroundColor','');
  $("#creditCard label").css("color","");  
});

Селектор $('#visa, #rnastercard') выбирает оба переключателя. Обратите внимание, что для удаления цветов фона и текста, добавленных при установке переключателя в положение РауPal, нужно просто передать пустую строку в качестве значения цвета:$('#creditCard label').css ('color', ''); . Измененный цвет элемента удаляется, но сохраняется цвет по умолчанию, заданный таблицей стилей.

Сокрытие элементов формы

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

Нередко в подобных формах мы видим пункт "Аналогично инфор­мации по платежу", возле которого можно установить флажок. Однако не лучше ли совсем убрать (скрыть) элемент формы, раз он оказывается ненужным?

Теперь добавим функцию событию установки флажка "Аналогично информации по платежу". НТМL-код данного флажка выглядит так:

<input type="checkbox" name="hideShip" id="hideShip">

Введем следующий фрагмент после кода:

$("#hideShip").click(function(e) {
    
})

Поскольку флажок имеет идентификатор hideShip, код выбирает его и добавляет функцию событию щелчка. В данном случае вместо сокрытия одного поля вам нужно спрятать целую группу. Поместите НТМL-код, описывающий эти элементы формы, в элемент div с идентификатором shipping: теперь, чтобы спрятать поля, доста­точно просто скрыть элемент div.

Однако вам нужно скрывать эти поля, только если установлен флажок. Если кто-то щелкнет кнопкой мыши дважды, тем самым сбросив флажок, то элемент div и его поля должны вновь стать видимыми. Поэтому сначала следует выяснить, установлен ли флажок.

$("#hideShip").click(function(e) {
 if($(this).prop('checked')){
	  
  }   
})

Простая управляющая инструкция облегчает проверку состояния флажка для решения относительно отображения или сокрытия элементов формы. Ключевое слово $(this) ссылается на объект, по которому производится щелчок - в данном случае на флажок. Атрибут элемента checked позволяет узнать, установлен или сброшен флажок. Если он установлен, то атрибут возвращает значение true, если сброшен - false. Вам остается лишь добавить код, обусловливающий сокрытие и отображение элементов формы.


$(document).ready(function(){
$(":text:first").focus(function() {
$("#paypal").click(function(e) {
$("#creditCard input").prop("disabled",true).css('backgroundColor','#BDB9B9');
$("#creditCard label").css("color","#BBB");
});
$("#visa, #mastercard").click(function(e) {
$("#creditCard input").prop("disabled",false).css('backgroundColor','');
$("#creditCard label").css("color","");
});
$("#hideShip").click(function(e) {
if($(this).prop('checked')){
$("#shipping").slideUp('fast')
}else{
$("#shipping").slideDown('fast')
}
});
});
});
<!DOCTYPE html>
<html>
<title>Усовершенствование простой формы заказа</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<style>
br{clear:both; }
.indent{margin:30px 0 0 0}
.label{margin:20px 0 0 0}
input[type=text]{width:40%}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":text:first").focus(function() {
$("#paypal").click(function(e) {
$("#creditCard input").prop("disabled",true).css('backgroundColor','#BDB9B9');
$("#creditCard label").css("color","#BBB");
});
$("#visa, #mastercard").click(function(e) {
$("#creditCard input").prop("disabled",false).css('backgroundColor','');
$("#creditCard label").css("color","");
});
$("#hideShip").click(function(e) {
if($(this).prop('checked')){
$("#shipping").slideUp('fast')
}else{
$("#shipping").slideDown('fast')
}
});
});
});
</script>
<body class="w3-light-grey">
<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:950px" >
<h2 class="w3-text-grey w3-padding-16"><em class="fa fa-indent fa-fw w3-margin-right w3-xxlarge w3-text-teal"></em>Усовершенствование простой формы заказа</h2>
<form action="#" method="post" name="formID" id="formID">
<fieldset class="w3-card-4" style="padding:20px;">
<legend class="w3-card-2 w3-large" style="padding:0 5px;">Информация об оплате</legend>
<label for="username">Имя</label><br>
<input name="name" type="text" id="username"><br>
<label for="surname">Адрес</label><br>
<input name="surname" type="text" id="surname" /><br>
<label for="surname">Город</label><br>
<input name="surname" type="text" id="surname" /><br>
<label for="surname">Область</label><br>
<input name="surname" type="text" id="surname" /> <br>
<label for="surname">Индекс </label><br>
<input name="surname" type="text" id="surname" /><br><br>
<label for="trade">Страна</label> <br>
<select name="trade" id="trade">
<option>Выберите страну</option>
<option>Германия</option>
<option>Россия</option>
<option>США</option>
<option>Франция</option>
<option>Украина</option>
</select><br>
<div class="label"><span class="label">Способ оплаты: </span>
<input type="radio" name="payment" id="paypal" value="paypal">
<label for="paypal">PayPal</label>
<input type="radio" name="payment" id="visa" value="visa">
<label for="visa">Visa</label>
<input type="radio" name="payment" id="mastercard" value="mastercard">
<label for="mastercard">Mastercard</label>
</div>
<div id="creditCard" class="indent">
<div>
<label for="cardNumber" class="label">Номер карты</label><br>
<input type="text" name="cardNumber" id="cardNumber"><br>
</div>
<div>
<label for="expiration" class="label">Срок действия</label><br>
<input type="text" name="expiration" id="expiration"><br>
</div>
</div><br><br>

</fieldset>
<fieldset class="w3-card-4" style="padding:20px; margin-top:30px">
<legend class="w3-card-2 w3-large" style="padding:0 5px;">Информация о доставке</legend>
<div id="shipping">
<input type="checkbox" name="hideShip" id="hideShip">
<label for="hideShip" class="label">Аналогично информации по платежу</label>
</div>
</fieldset><br><br>
<input type="submit" name="submit" id="submit" value="Отправить" ><br><br>
</form>
</div>
<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</div>
</body>
</html>