Запрет отправки формы пока не установлен флажок

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

Сделать такое можно разными способами, например, проверить на JS заполненные поля, и если не установлен флажок, вывести предупредительное сообщение. Также можно сделать проверку после отправки формы на PHP и проверить уже там, был ли поставлен флажок.

Но есть способ намного проще – просто заблокировать кнопку "отправить" пока не установлена галочка на условиях.

Делается это очень просто, блокируем кнопку отправки формы, а по клику на чекбокс ее разблокируем.

При необходимости, добавим немного стилей:

В итоге получим:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Дмитрий:

    Добрый день! Подскажите пожалуйста, как в чекбоксе убрать галочку при обновлении страницы?

    Ответить
    • Дмитрий:

      Нашел. Сам себе отвечу. Нужно например из строки <input type="checkbox" autocomplete="off" id="checkbox-at" name="checkbox-at" checked="checked"......> убрать checked="checked", а поставить autocomplete="off".

      Ответить
  • Павел:

    Здравствуйте. У меня, при установке формы, после нажатия на чекбокс весь текст заливается темно-синим цветом. Скрин прикладываю.
    Посмотрел вроде все, не пойму почему. Подскажите.

    Ответить
    • Alexander:

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

      Ответить
  • Николай:

    Такой вопрос, если на сайте 2 и более форм, как сделать чтобы не конфликтовало? Просто если данный скрипт устанавливать на две формы, то не работает.

    Ответить
    • Alexander:

      Заменить ID и их применение на любые другие, например:

      <input id="newcheckbox" type="checkbox" name="checkbox" onchange="document.getElementById('newsubmit').disabled = !this.checked;" />
      <label for="newcheckbox">Настоящим подтверждаю, что я согласен</label>	
      <input type="submit" disabled="disabled" name="submit" id="newsubmit" value="Отправить" />
      Ответить
      • Николай:

        Работает, спасибо!

        Ответить
  • Ильдар:

    Спасибо работает- но если не перезагрузить страницу после отправки то следующий отправляет без галочки

    Ответить
    • Alexander:

      У вас лиса?
      Если да, то она запоминает

      Ответить
  • Дима:

    Круто, спасибо. Надеюсь тема еще не заброшена и я смогу получить ответ. А как сделать так, чтобы наоборот. при нажатии галочки блокировалась кнопка? Хочу попробовать эту схему как защиту от спам регистрации ботами.

    Ответить
    • Alexander:
      <div class="formname">
      	<input id="checkbox" type="checkbox" name="checkbox" onchange="document.getElementById('submit').disabled = this.checked;" />
      	<label for="checkbox">Настоящим подтверждаю, что я согласен</label>	
      	<input type="submit" name="submit" id="submit" value="Отправить" />
      </div>

      Только от спама это врядли поможет

      Ответить
      • Дима:

        О, спасибо. Думаю сделать вторым флажком активация которого будет отключать кнопку. Или спам боты так не перехитрить?

        Ответить
        • Alexander:

          Я никогда не занимался спамом, но подозреваю что им пофик на эти галочки, тем более на JS
          Вам нужно прятать файл отправщик, но это уже другая тема 🙂

          Ответить
  • Рим:

    Отличное решение! Очень выручили, почаще буду просматривать ваш сайт теперь =)

    Ответить
  • Анатолий:

    Гениально, работает на форме великолепно. Спасибо огромное! Только в тексте ссылку на Политику сделал.

    Ответить
  • Света:

    А как сделать, чтобы по умолчанию галочка стояла активной ?

    Ответить
    • Alexander:

      На input галочки добавить checked="checked"
      а с input отправки убрать disabled="disabled"

      Ответить
  • V.A.R:

    Я вообще без всяких галочек делал.
    Просто написал, что отправляя форму я согласен )

    Ответить