плавный скролинг при нажатии кнопки на форме
Приветствую, есть форма, которая находится чуть ниже центра страницы, пхп обработчик на этой же странице, необходимо, что бы при нажатии кнопки "войти" происходил плавный скролл к якорю перед формой. Ниже - код и демо как сделал, но при таком варианте игнорируется пхп обработчик, и радио кнопки не работают. При нажатии на любой элемент формы - тупо скролит вниз и ничего не происходит :help:
http://avzp.com.ua/1/test.php
<html>
<head>
<title>123</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<div id="form"></div>
<form class="form scroll" action="#form" id="auth" method="post">
<input name="login" id="login" class="textbox" placeholder="login:" type="text" maxlength="30"/><br><br>
<input name="pass" id="pass" class="textbox" placeholder="pass" type="password" maxlength="30"/><br>
<p>
<label for="sch"><input type="radio" checked="checked" name="chs" value="sch" id="sch"/>opt1</label><br/>
<label for="th"><input type="radio" name="chs" value="th" id="th"/>opt2</label><br/>
</p>
<input class="button" type="submit" value="enter"></a> <a href="registration">reg</a>
</form>
<br />
<?
if(isset($_POST['login']) && isset($_POST['pass']))
{
echo "проверки, авторизации и т.д.";
}
?>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<script>
$('.scroll').click(function(event) {
event.preventDefault();
var href=$(this).attr('action');
var target=$(href);
var top=target.offset().top;
$('html,body').animate({
scrollTop: top
}, 1000);
});
</script>
</body>
</html>
|
РНР никакого отношения к прокрутки страницы не имеет, вы же не значение ее передаете серверу, а форму. Прокручена она была или нет, серверу до этого нет никакого дела.
А вот структура кода вашего не отвечает вашей задаче - форма должна выводится при первом запросе этой страницы и при ошибках ввода. У вас же она будет всегда, если нет перехода после удачного ввода. |
Я просто не стал выводить весь обработчик. При удачной авторизации идет редирект на другую страницу. Только я не совсем понял к чему это.
|
Что к чему, редирект? Как один из способов защиты от F5. Если при этом у вас он производится передачей заголовка, то его не произойдет, потому как будет ошибка, причиной которой является вывод в браузер до обработчика формы.
|
Редирект происходит не передачей заголовка а обычным document.location.href, в самом конце пхп обработчика, после всех проверок на корректность данных. В данном примере который я описал выше - максимально упрощенный вариант, я не стал прописывать весь код обработчика так как Вы верно подметили:
Цитата:
|
Да что вы пристали к этому скроллу, плевать сервер хотел на это, он об этом вообще не подозревает.
Если даже вы пишите по минимуму, то хотя бы пишите так, чтобы была видна логика работы, в противном случае ваш код говорит о том, что все чтобы не вводил пользователь все пропадает, так как при каждом запросе страницы выводится форма не важно от результатов ввода, и ее поля очищаются. А по уму это <? if($_POST) { //пришла форма, проверяем //либо ошибки, либо ОК и переход } if(!$_POST() || $error) { ?> <html> .... И форма с определением значений полей формы при ошибках. Вот такова должна быть логика, а будет у вас там скролл на странице, не будет это не важно. |
Не буду приводить весь код, переписал пол страницы, скролинг к нужному месту у меня в начале php обработчика:
<script>
var scroll=$('#form').offset().top;
$('html, body').animate({scrollTop: scroll}, 400);
</script>
Но тут получается, что если страница хоть немного прокручена вниз, то при клике сначала бросает наверх страницы, а потом плавно спускает к якорю. Можно ли как-то offset'у задать, что бы он скролил от текущих координат? |
Странный обработчик, если JS находится в начале, где ему как раз не место. И вообще, по чем вы конце концов щелкаете - в описании речь о кнопке "войти", которой в коде не видно, а обработчик установлен щелчку на форме? Теперь речь о щелчке и действии похожем на так "модное" href="#". В action="#form", который то в общем на сервер не передается.
Так что же вы делаете то на самом деле? |
// функция авторизации вначале которой слайдер
<?
fuction auth()
{
echo "<script>scroll();</script>";
...
проверки и т.д.
...
}
?>
<html>
...
//якорь
<div id="form"></div>
//форма
<form action="" method="post">
<input class="button" type="submit" value="enter">
...
//функция прокрутки
<script>
function scroll
{
var scroll=$('#form').offset().top;
$('html, body').animate({scrollTop: scroll}, 400);
}
</script>
// обработчик по клику кнопки
<?
if(isset($_POST['submit']))
{
auth();
}
?>
Если страница не прокручена - все нормально, я нажимаю на кнопку - меня плавно отпускает у нужному месту, но: Цитата:
|
Какую кнопу вы нажимаете, отправку формы? А если форма отправляется, то это что означает?
|
Перезагрузка страницы?
|
Ну, и какие тогда могут быть вопросы почему "бросает страницу вверх"?
Вы можете и обидеться, но структура вашего кода, это не структура, это бедлам полный. |
Буду учить мат часть и смотреть в сторону ajax
|
Цитата:
Большая просьба подсказать, что не так, буду наоборот благодарен любой критике. |
Отвечаю, что не так в структуре:
1) В самом начале запускается вызов функции на клиенте - scroll(), откуда ей взяться и что она должна выполнить, если сама страница выводится далее? 2) Ладно, пусть бы это было сделано грамотно и не было бы проблем, но почему вызов этой функции в блоке, который проверяет данные пришедшей формы? 3) Ранее говорилось о завершении операции входа, то есть действии сервера, и у вас определен переход на "саму себя" - location. Можно и так, не проблема, но что после такого перехода увидит пользователь, если логика вашего кода кроме вывода формы не подразумевает ничего? Если принять во внимание переход на "саму себя" и результат успешного входа это установленный в сессии его признак, то в начале кода должна быть проверка наличия этого флага - нет его, значит выводится форма, которая выводится и при ошибках. Если флаг установлен, значит выводится нечто иное. Форма или нечто иное может быть и не прописано в самом коде, это могут быть подключаемые по условию их шаблоны, с переменными, значения которых определяет основной скрипт. В начале также определяются значения полей формы - если форма получена, значит они равны соответствующим значениям полям формы, иначе NULL. Эти значения (кроме пароля) подставляются в форму. Далее идет проверка формы, если она была принята, и если ОК, значит пишется в сессию признак, передается заголовок осуществляющий переход, и выдох из скрипта. Если ошибки, значит формируется сообщение в определенной переменной. Далее вывод непосредственно html-кода страницы включая и клиентских сценариев, если нужно, с подключением по условию "вход/нет входа" шаблонов, а также вывод ошибок. *********** У вас же просто каша - серверным сценарием вы пытаетесь управлять клиентом, не фактически, а по логике. При этом "проверки и т.д." и "обработчик по клику кнопки", что являющееся вообще-то одной задачей, у вас расколота на части с непонятным по логике определением места им в структуре кода - часть в начале, часть в самом конце. |
| Часовой пояс GMT +3, время: 14:03. |