Смена класса кнопки при успешном заполнении формы

@technoseal · Регистрация: 22.07.2014

Студворк — интернет-сервис помощи студентам

Приветствую всех! Собственно задача описана в теме) Есть формы с полями и валидацией. Мне необходимо сделать так, чтобы только при успешной отправке заявки (то есть все поля заполнены верно), у кнопки менялся класс. Зачем мне это? Чтобы можно было корректно настроить аналитику через GTM. Заранее спасибо!

@atanov · 06.05.2019, 15:24

technoseal, ну а где код?

Добавлено через 9 минут
technoseal, в общем виде так:

HTML5
1
2
3
4
5
6
7
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
    <button class = "buttonClassOne">клац</button>
</html>
<script src = "188.js"></script>

JavaScript
1
2
3
4
5
6
7
8
9
10
document.addEventListener('DOMContentLoaded', docReady);
function docReady()
{
    let checkAny = true;
    if(checkAny)
    {
        document.getElementsByClassName('buttonClassOne')[0].classList.add('buttonClassTwo');
        document.getElementsByClassName('buttonClassOne')[0].classList.remove('buttonClassOne');
    }   
}

@technoseal · 06.05.2019, 16:45 **[ТС]**

Сообщение от atanov

technoseal, ну а где код?

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

Добавлено через 1 минуту

Сообщение от atanov

technoseal, ну а где код?

точнее вот:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.ajax({
      url:'mail/mail.php',
      type:'POST',
      data:$data,
      beforeSend:function() {
       $submitButton.text("Отсылаю");
      },
      success:function(res) {
        if(res == 1)  {
         $submitButton.text('Отправлено');
         $submitButton.css('background', '#55c555');
        } else {
         $submitButton.text('Не отправлено');
         $submitButton.css('background', '#f77d7d');
          setTimeout(() => {
           $submitButton.removeAttr('style')
          }, 1000);
        }
      },

@atanov · 06.05.2019, 17:05

technoseal, ну это у Вас отправка ajax'ом, а не никакая валидация и написана на jquery. Сей код что отправляет и в зависимости от ответа меняет надпись и цвет кнопки. Давайте код валидации и html

@technoseal · 06.05.2019, 17:12 **[ТС]**

Сообщение от atanov

technoseal, ну это у Вас отправка ajax'ом, а не никакая валидация и написана на jquery. Сей код что отправляет и в зависимости от ответа меняет надпись и цвет кнопки. Давайте код валидации и html

HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <div class="popup" id="popup__consult">
    <div class="popup__inner">
      <div class="popup__title centered">Задайте свой вопрос</div>
      <form class="form" id="form__consult" action="" method="post">
        <div class="field">
          <input type="text" name="name" id="" placeholder="Ваше имя">
        </div>
        <div class="field">
          <input type="email" name="email" id="" placeholder="E-mail">
        </div>
        <div class="field">
          <input type="tel" name="tel" id="" placeholder="Номер телефона">
        </div>
        <div class="field">
          <textarea name="text" id="" placeholder="Ваш вопрос"></textarea>
        </div>
        <div class="field centered ">
          <button type="submit" class="btn btn__red btn__arrow">Получить консультацию</button>
        </div>
      </form>
    </div>
  </div>

Добавлено через 2 минуты
И еще:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
//E-mail Ajax Send
function formSubmit() {
  var $errors = [],
      $this = $(this),
      $submitButton = $this.find('button[type="submit"]'),
      $allInputs = $this.find('input:not([type="checkbox"]), textarea'),
      $emailArea =  $this.find('input[name="email"]'),
      $nameArea =  $this.find('input[name="name"]'),
      $phoneArea =  $this.find('input[name="tel"]'),
      $textArea =  $this.find('textarea[name="text"]'),
            $regName = /^[a-zA-Zа-яА-ЯёЁ.!#$%&’*+/=?^_ `{|}~-]+$/i,
            $regEmail = /^[A-Za-z0-9][A-Za-z0-9\.-_]*[A-Za-z0-9]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*\.)+[A-Za-z]*$/,
            $regPhone = /^([+]?[0-9\s-\(\)]{3,25})*$/i;
    
  $allInputs.removeClass('wrong');
  $this.find(".error").remove();
 
  function validate(element, validator, text) {
    if (!element) return
    if(element.val() === '') {
      element.addClass('wrong');
      setError(element, `Пожалуйста, введите ${text}`)
      return $errors.push(true);
    } else if (validator && !validator.test(element.val())) {
      element.addClass('wrong');
      setError(element, `Пожалуйста, введите ${text} правильно`);
      return $errors.push(true);
    } else {
      element.removeClass('wrong');
      removeError(element)
      return $errors.push(false)
    }
  }
  function setError(e, text) {
    e.after(`<div class="error">${text}</div>`)
  }
  function removeError(e) {
    e.next(".error").remove();
  }
 
  validate($nameArea, $regName, "ваше имя")
  validate($emailArea, $regEmail, "ваш email")
  validate($phoneArea, $regPhone, "ваш телефон")
  validate($textArea, null, "ваш текст")
 
  if (!$errors.some(error => error === true)) {
    var $data = $this.find('input, textarea').serialize();
 
    $.ajax({
      url:'mail/mail.php',
      type:'POST',
      data:$data,
      beforeSend:function() {
       $submitButton.text("Отсылаю");
      },
      success:function(res) {
        if(res == 1)  {
         $submitButton.text('Отправлено');
         $submitButton.css('background', '#55c555');
        } else {
         $submitButton.text('Не отправлено');
         $submitButton.css('background', '#f77d7d');
          setTimeout(() => {
           $submitButton.removeAttr('style')
          }, 1000);
        }
      },
      error:function() {
       $submitButton.text('Не отправлено');
       $submitButton.css('background', '#f77d7d');
        setTimeout(() => {
         $submitButton.removeAttr('style')
        }, 1000);
      }
    })
  }
  return false;
}

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@technoseal 21 / 21 / 7 Регистрация: 22.07.2014 Сообщений: 135

	Смена класса кнопки при успешном заполнении формы 06.05.2019, 13:38. Показов 864. Ответов 4 Метки нет (Все метки) Приветствую всех! Собственно задача описана в теме) Есть формы с полями и валидацией. Мне необходимо сделать так, чтобы только при успешной отправке заявки (то есть все поля заполнены верно), у кнопки менялся класс. Зачем мне это? Чтобы можно было корректно настроить аналитику через GTM. Заранее спасибо! 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	06.05.2019, 17:05
	technoseal, ну это у Вас отправка ajax'ом, а не никакая валидация и написана на jquery. Сей код что отправляет и в зависимости от ответа меняет надпись и цвет кнопки. Давайте код валидации и html 0