dle-modules / DLE-UniForm

Универсальные формы обратной связи для DataLife Engine
http://pafnuty.name/modules/159-uniform.html
MIT License
22 stars 12 forks source link

Пользовательское соглашение #85

Closed dollar1981 closed 5 years ago

dollar1981 commented 5 years ago

Доброго времени суток. Не смог понять как сделать чексбокс обязательным. Делаю для Пользовательского Соглашения. То есть если чексбокс отмечен все ок и отправляем форму, если нет то выводим предупреждение. Подскажите если вас не затруднит. @pafnuty не забудь посмотреть этот тиккет :ticket:

VitArts commented 5 years ago

Можно сделать так, если чекбокс не отмечен то на кнопку "отправить" ставим атрибут disable, если чекбокс отмечен то включаем кнопку.

  1. Создаем чекбокс: `

    `
  2. Добавляем атрибут и id кнопки: <button class="uf-btn ladda-button" id="btn" type="submit" data-style="zoom-out" disabled="disabled">ОТПРАВИТЬ</button>

  3. Пишем скрипт: function changeButtonState(checkbox) { var btn = document.getElementById('btn'); if (checkbox.checked) { btn.disabled = false; } else { btn.disabled = true; } }

А далее можно развивать, если человек нажал на кнопку с атрибутом disable то выводим сообщение о том, что чекбокс не отмечен и тд.

dollar1981 commented 5 years ago

Можно сделать так, если чекбокс не отмечен то на кнопку "отправить" ставим атрибут disable, если чекбокс отмечен то включаем кнопку.

  1. Создаем чекбокс: <input type="checkbox" id="check" onchange="changeButtonState(this)"/> <label for="check"><span class="tooltip-item"> Политика Конфиденциальности</span> </label>
  2. Добавляем атрибут и id кнопки: <button class="uf-btn ladda-button" id="btn" type="submit" data-style="zoom-out" disabled="disabled"><span class="ladda-label"><b>ОТПРАВИТЬ</b></span></button>
  3. Пишем скрипт: function changeButtonState(checkbox) { var btn = document.getElementById('btn'); if (checkbox.checked) { btn.disabled = false; } else { btn.disabled = true; } }

С первыми двумя пунктами понятно. А вот с "пишем скрипт" не очень. Куда мне необходимо вставить данный скрипт? В JS файл модуля? И еще: Ведь тут рассчет на "дурака", в том смысле, что остальные поля при не заполнении в данном модуле выводят ошибку-предупреждение, что надо сделать чтобы форму отправить. Хотелось бы воспроизвести тот же принцип и с чексбоксом. Это возможно?

VitArts commented 5 years ago

Можно сделать так, если чекбокс не отмечен то на кнопку "отправить" ставим атрибут disable, если чекбокс отмечен то включаем кнопку.

  1. Создаем чекбокс: <input type="checkbox" id="check" onchange="changeButtonState(this)"/> <label for="check"><span class="tooltip-item"> Политика Конфиденциальности</span> </label>
  2. Добавляем атрибут и id кнопки: <button class="uf-btn ladda-button" id="btn" type="submit" data-style="zoom-out" disabled="disabled"><span class="ladda-label"><b>ОТПРАВИТЬ</b></span></button>
  3. Пишем скрипт: function changeButtonState(checkbox) { var btn = document.getElementById('btn'); if (checkbox.checked) { btn.disabled = false; } else { btn.disabled = true; } }

С первыми двумя пунктами понятно. А вот с "пишем скрипт" не очень. Куда мне необходимо вставить данный скрипт? В JS файл модуля? И еще: Ведь тут рассчет на "дурака", в том смысле, что остальные поля при не заполнении в данном модуле выводят ошибку-предупреждение, что надо сделать чтобы форму отправить. Хотелось бы воспроизвести тот же принцип и с чексбоксом. Это возможно?

Вставляйте прям в form.tpl в самый низ в тегах

Насчет второго вопроса, это еще проще получается, делается все средствами самого модуля, добавляйте чекбокс: `

{ Условия вывода в шаблон информации в зависисмости от значения чекбокса } [uf_checkbox_checkbox1="oneCheck"]Чекбокс отмечен
[/uf_checkbox_checkbox1]

            </div>`

Далее в конфиге указывайте: checkboxFields = checkbox1 + добавьте его в поле required

А после уже описывайте ошибку в form.tpl

dollar1981 commented 5 years ago

Можно сделать так, если чекбокс не отмечен то на кнопку "отправить" ставим атрибут disable, если чекбокс отмечен то включаем кнопку.

  1. Создаем чекбокс: <input type="checkbox" id="check" onchange="changeButtonState(this)"/> <label for="check"><span class="tooltip-item"> Политика Конфиденциальности</span> </label>
  2. Добавляем атрибут и id кнопки: <button class="uf-btn ladda-button" id="btn" type="submit" data-style="zoom-out" disabled="disabled"><span class="ladda-label"><b>ОТПРАВИТЬ</b></span></button>
  3. Пишем скрипт: function changeButtonState(checkbox) { var btn = document.getElementById('btn'); if (checkbox.checked) { btn.disabled = false; } else { btn.disabled = true; } }

С первыми двумя пунктами понятно. А вот с "пишем скрипт" не очень. Куда мне необходимо вставить данный скрипт? В JS файл модуля? И еще: Ведь тут рассчет на "дурака", в том смысле, что остальные поля при не заполнении в данном модуле выводят ошибку-предупреждение, что надо сделать чтобы форму отправить. Хотелось бы воспроизвести тот же принцип и с чексбоксом. Это возможно?

Вставляйте прям в form.tpl в самый низ в тегах

Насчет второго вопроса, это еще проще получается, делается все средствами самого модуля, добавляйте чекбокс: <div class="uf-field-input"> {* Условия вывода в шаблон информации в зависисмости от значения чекбокса *} [uf_checkbox_checkbox1="oneCheck"]Чекбокс отмечен <br>[/uf_checkbox_checkbox1] <label><input type="checkbox" name="checkbox1" value="oneCheck" [uf_checkbox_checkbox1_oneCheck]checked[/uf_checkbox_checkbox1_oneCheck]> Простой чекбокс</label> </div>

Далее в конфиге указывайте: checkboxFields = checkbox1 + добавьте его в поле required

А после уже описывайте ошибку в form.tpl

Спасибо. Теперь ясна большая часть скрипта. Но вот при описании ошибки в шаблоне происходит косяк. В поле вывода инфы об ошибки так же попадают теги [uf_error_checkbox1] Вы не приняли Пользовательское Соглашение [/uf_error_checkbox1]

VitArts commented 5 years ago

Вот тут я не подскажу, я не использую этот вариант, это чисто моя логика.

По мне удобнее вариант 1.

dollar1981 commented 5 years ago

Вот тут я не подскажу, я не использую этот вариант, это чисто моя логика.

По мне удобнее вариант 1.

Спасибо вам большое. Я тоже чисто логически, оглядываясь на стандартную форму, прописал сообщение ошибки. Но теги выводятся в форме вместе с ней. Как победить так и не смог понять. Пока просто прописал прям в поле required.

VitArts commented 5 years ago

Не за что, да required как вариант)