Обработка щелчка на кнопке

В приведенном ниже примере (листинг 1.25) кнопка изначально недоступна. При вводе в текстовое поле кнопка активизируется. При щелчке на кнопке текст, введенный в текстовое поле, отображается на кнопке. Текстовое поле очищается и кнопка становится недоступной.

Листинг 1.25. Обработка щелчка на кнопке

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Обработка щелчка на кнопке</title>
</head>
<body>
<div class="container my-3">
   <input type="text" id="txt1" class="form-control mb-2">
   <input type="button" value="Изменить текст на кнопке" 
          id="btn1" class="btn btn-primary" disabled>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#btn1').click( function() {
      var elem = $('#txt1');
      this.value = elem.val();
      elem.val('');
      $(this).prop('disabled', true);
   });
   $('#txt1').keyup( function() {
      var txt1_val = $('#txt1').val();
      var btn1 = $('#btn1');
      if (txt1_val.length === 0) {
         if ( !btn1.is(':disabled') ) btn1.prop('disabled', true);
      }
      else {
         if ( btn1.prop('disabled') ) btn1.prop('disabled', false);
      }
   });
});
</script>
</body>
</html>

Обычная командная кнопка может быть вставлена в Web-страницу не только с помощью тега <input>, но и с помощью парного тега <button>. В качестве примера выведем порядковый индекс кнопки, на которой был сделан щелчок (листинг 1.26).

Листинг 1.26. Вывод порядкового индекса кнопки, на которой был сделан щелчок

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Вывод порядкового индекса кнопки</title>
</head>
<body>
<div class="container my-3">
   <input type="button" value="Кнопка 1" class="btn btn-primary">
   <input type="button" value="Кнопка 2" class="btn btn-primary">
   <button type="button" class="btn btn-primary">Кнопка 3</button>
   <button type="button" class="btn btn-primary">Кнопка 4</button>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $(':button').click( function() {
      window.alert( 'Индекс: ' + $(':button').index(this) );
   });
});
</script>
</body>
</html>

Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов