Хаки и Скрипты Next Generation CMS : JS, Интерфейс, Текст и ссылки, Кнопки и иконки : Небольшая плюшка для регистрации и не только

irbees2008 Опубликовано - 15 - июля JS

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Демо:

И так, в движке есть страничка регистрации, там просто заполняешь поля и жмешь кнопку зарегистрироваться. Но вот правила прочитать или условия не каждый прочитает, да согласен он или нет тоже не знаем.Так вот есть небольшой скриптик, например, если пользователь не соглашается с правилами, он не жмет на флажок (checkbox) и ему не появится кнопка «Зарегистрироваться», но если он со всеми правилами согласен, тогда жмет на флажок (checkbox) и ему отображается кнопка «Зарегистрироваться».
Скрипт простой .
И так приступим открываем форму регистрации дефолтного шаблона,там есть такая форма

Код:

<form name="register" action="{{ form_action }}" method="post" onsubmit="return validate();">
	<input type="hidden" name="type" value="doregister"/>
	{% for entry in entries %}
		<div class="label label-table">
			<label for="{{ entry.id }}">{{ entry.title }}:</label>
			<span class="input2">{{ entry.input }}</span>
			<div class="label-desc" id="{{ entry.id }}">{{ entry.descr }}</div>
		</div>
	{% endfor %}
	{% if flags.hasCaptcha %}
		<div class="label label-table captcha pull-left">
			<label for="reg_capcha">{{ lang.captcha }}:</label>
			<input id="reg_capcha" type="text" name="vcode" class="input">
			<img src="{{ admin_url }}/captcha.php" onclick="reload_captcha();" id="img_captcha" style="cursor: pointer;" alt="{{ lang.captcha }}"/>
			<div class="label-desc">{{ lang.captcha_desc }}</div>
		</div>
	{% endif %}
	<div class="clearfix"></div>
	<div class="label">
		<label class="pull-left"><input type="checkbox" name="agree">
			{{ lang.theme['registration.rules'] }}</label>
		<input type="submit" value="{{ lang.register }}" class="button pull-right">
	</div>
</form>

Так чекбокс есть и кнопка тоже это в этом кусочке

Код:

<div class="label">
		<label class="pull-left"><input type="checkbox" name="agree">
			{{ lang.theme['registration.rules'] }}</label>
		<input type="submit" value="{{ lang.register }}" class="button pull-right">
	</div>

Меняем

Код:

<input type="checkbox" name="agree">

на

Код:

<input type="checkbox" id="_tour_bron" name="_tour_bron" value="true">

Удаляем кнопку

Код:

<input type="submit" value="{{ lang.register }}" class="button pull-right">

И добавляем скрипт который показывает кнопку регистрации:

Код:

<script>
document.getElementById('_tour_bron').onclick = function() {
// access properties using this keyword
if ( this.checked ) {
document.getElementById('button_on_checkbox').innerHTML = '<input type="submit" value="{{ lang.register }}" class="button pull-right">';
} else {
document.getElementById('button_on_checkbox').innerHTML = '';
}
};
</script>
<span id="button_on_checkbox"></span>

У меня получился такой кусок кода

Код:

<div class="label">
		<label class="pull-left">
		    <input type="checkbox" id="_tour_bron" name="_tour_bron" value="true">
		    {{lang.theme['registration.rules'] }}
		</label>
		<script>
           document.getElementById('_tour_bron').onclick = function() {
           // access properties using this keyword
           if ( this.checked ) {
           document.getElementById('button_on_checkbox').innerHTML = '<input type="submit" value="{{ lang.register }}" class="button pull-right">';
           } else {
           document.getElementById('button_on_checkbox').innerHTML = '';
}
};
        </script>
        <span id="button_on_checkbox"></span>
	</div>

Вот и все, пользуемся.

Можешь почитать и вот эту статейку "Абра катабра блок появись ...."

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.