Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Активация кнопки/ссылки после проверки условия (https://javascript.ru/forum/dom-window/47703-aktivaciya-knopki-ssylki-posle-proverki-usloviya.html)

Cardan 04.06.2014 08:02

Активация кнопки/ссылки после проверки условия
 
Добрый день.
Сайт на joomla, подобных плагинов и модулей не нашел, поэтому пришлось обратится к кодам и скриптам. Сам я с Явой не знаком, но давно программировал на паскале, общее нашел, но не очень хотелось бы ради этого изучать, но если придется, то покопаюсь. Но надеюсь, что подскажете правильный код.

Планирую сделать так: текст, поле ввода и кнопка. Если правильно введено значение в поле ввода, то при нажатии на кнопку человек должен скачать файл или должно выйти окошко со ссылкой. Если не правильно ввел, то сообщение об этом.

Делаю это, для доступа к своим роликам детским садам, школам. То есть будет написано. Дет сад №1. Что бы скачать ролик, введите имя отчество воспитателя. И человек не может скачать, пока не введет Мария Ивановна (например).

Я параметров всех и синтаксиса не знаю. Представление имею о программировании (давно занимался), но вот слишком уж Скрипт отличается от паскаля какого нибудь, в том и загвоздка.
Понимаю, что знающему человеку на 3 минуты этот код написать.

Задать переменную или константу и присвоить ей текст/пароль "Мария Ивановна". Сделать проверку при нажатии на кнопку, если введенное в поле значение соответствует, то открыть окно со ссылкой, если фальшиво, то открыть окно с текстом "попробуй еще раз".

Буду очень благодарен, если не отправите меня изучать яву)))

Спасибо.

krasovsky 04.06.2014 09:49

Если тебе нужна защита от дурака то можно все это сделать в js:

<div>
<label>Введите имя и отчество чтобы скачать файл</label>
<input type="text" data-val="Иван Иванович">//как видим правильный ответ через консоль посмотреть не составляет труда, однако у нас некоторые js-писатели не знают что такое консоль, что уж об остальных говорить.
<button>Скачать</button>
</div>

//код с подключенной библиотекой jquery

$('button').click(function(){
    if($(this).prev().val() == $(this).prev().data('val')) {
       //и вот тут уже скачка.например редирект на страницу со ссылкой
       location.href = '/some/url/download/';

    }
else {
   //либо редирект на страницу ошибки, как выше, либо модальный диалог на этой же странице,либо просто вставить текст ниже кнопки с отказом..много вариантов
}
})


Если, не от дурака - то делать запрос к серверу, на сервере сверять значения, и в зависимости от результат давать скачку или нет.

Cardan 04.06.2014 12:25

Спасибо. Подойдет и от "дурака"))) Не секретные файлы. Только без подключения библиотеки jquery нельзя? Или как это сделать.
Боюсь не одолею подключение.

BETEPAH 04.06.2014 13:15

<div>
<label>Введите имя и отчество чтобы скачать файл</label>
<input id="teacher-name" type="text" data-val="Иван Иванович">
<button id="btn-to-download">Получить ссылку</button>
<div id="link-to-download" style="display:none"><a href="">ссылка на файл</a></div>
</div>
<script>
document.querySelector('#btn-to-download').onclick = function() {
var field = document.querySelector('#teacher-name').value,
name = document.querySelector('#teacher-name').dataset.val;
if (field == name) document.querySelector('#link-to-download').style.display = 'block';
else alert('Неправильное имя отчество');
};
</script>

Cardan 04.06.2014 13:31

Все просто супер, все работает идеально!
Но, одна проблема. У меня на странице несколько ссылок должно быть для разных заведений, соответственно с разными кнопками на скачивание и разными паролями.
Попробовал скопировать код еще раз, но тогда первый работает, а второй нет.
Можно, для нескольких файлов такой код сделать? Спасибо, вы очень помогаете.

BETEPAH 04.06.2014 14:00

<div>
	<label>Введите имя и отчество чтобы скачать файл</label>
	<input class="teacher-name" type="text" data-val="Иван Иванович" data-link="http://javascript.ru/forum/image.php?u=14174&dateline=1380803229">
	<button class="btn-to-download">Получить ссылку</button>
</div>
<div>
	<label>Введите имя и отчество чтобы скачать файл</label>
	<input class="teacher-name" type="text" data-val="Федор Кузмич" data-link="http://javascript.ru/forum/image.php?u=14174&dateline=1380803229">
	<button class="btn-to-download">Получить ссылку</button>
</div>
<script>
var forms = document.querySelectorAll('.btn-to-download');
for (var i = 0; i < forms.length; i++) {
	forms[i].onclick = function() {
		var wrap = this.parentNode;
		if (wrap.querySelector('.link-to-download')) return;
		var field = wrap.querySelector('.teacher-name');
		var inputName = field.value,
			name = field.dataset.val,
			link = field.dataset.link;
			
		if (inputName == name && link) {
			var div = document.createElement("div");
			div.className = 'link-to-download';
			div.innerHTML = '<a href="' + link + '">ссылка на файл</a>';
			wrap.appendChild(div);
		} else alert('Неправильное имя отчество');
	};
}
</script>

Cardan 04.06.2014 14:12

Огромное спасибо! То, что нужно. Лучший форум и лучшие люди! Очень помогли. Буду использовать этот код.
Но все же спрошу. Пароль явно видно, тем же Firebug. Можно ли его как то зашифровать, например base64. Хотя бы как то с глаз убрать немного. Если это сложно, то и ладно, не критично. А если не очень трудоемко, то хотя бы подскажите в какую сторону копать.
Спасибо.

krasovsky 09.06.2014 07:57

Зашифровать, понятия не имею как. Убрать - ну можешь засунуть куда нибудь в дебри html, но тогда придется и код изменить.
А вообще врядли кто то полезет в консоль

BETEPAH 09.06.2014 10:41

Цитата:

Сообщение от Cardan
Можно ли его как то зашифровать, например base64.

Можно, чего ж нет. Вот здесь можете взять функцию decode64().
Зашифровывать можно функцией encode64(), форма для зашифровки там закомментирована.

Cardan 11.06.2014 19:08

Огромное спасибо вам еще раз. Все сделал, все довольны)))


Часовой пояс GMT +3, время: 04:28.