Форум

sones · #1 (**permalink**) 21.03.2015, 18:03

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

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>&nbsp;&nbsp;&nbsp; <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>

laimas · #2 (**permalink**) 21.03.2015, 18:26

РНР никакого отношения к прокрутки страницы не имеет, вы же не значение ее передаете серверу, а форму. Прокручена она была или нет, серверу до этого нет никакого дела.

А вот структура кода вашего не отвечает вашей задаче - форма должна выводится при первом запросе этой страницы и при ошибках ввода. У вас же она будет всегда, если нет перехода после удачного ввода.

sones · #3 (**permalink**) 21.03.2015, 18:55

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

laimas · #4 (**permalink**) 21.03.2015, 19:22

Что к чему, редирект? Как один из способов защиты от F5. Если при этом у вас он производится передачей заголовка, то его не произойдет, потому как будет ошибка, причиной которой является вывод в браузер до обработчика формы.

sones · #5 (**permalink**) 21.03.2015, 20:36

Редирект происходит не передачей заголовка а обычным document.location.href, в самом конце пхп обработчика, после всех проверок на корректность данных. В данном примере который я описал выше - максимально упрощенный вариант, я не стал прописывать весь код обработчика так как Вы верно подметили:

Цитата:

РНР никакого отношения к прокрутки страницы не имеет

У меня в первом посте есть ссылка на страницу, где есть форма, при нажатии на кнопку оно красиво скролится (чего я и пытаюсь добиться) но обработчик формы не выполняется.

laimas · #6 (**permalink**) 21.03.2015, 20:52

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

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

А по уму это

<?
if($_POST) {
//пришла форма, проверяем
//либо ошибки, либо ОК и переход
}

if(!$_POST() || $error) {
?>
<html>
....
И форма с определением значений полей формы при ошибках.

Вот такова должна быть логика, а будет у вас там скролл на странице, не будет это не важно.

sones · #7 (**permalink**) 23.03.2015, 16:20

Не буду приводить весь код, переписал пол страницы, скролинг к нужному месту у меня в начале php обработчика:

<script> 
var scroll=$('#form').offset().top;
$('html, body').animate({scrollTop: scroll}, 400); 
</script>

Но тут получается, что если страница хоть немного прокручена вниз, то при клике сначала бросает наверх страницы, а потом плавно спускает к якорю.
Можно ли как-то offset'у задать, что бы он скролил от текущих координат?

laimas · #8 (**permalink**) 23.03.2015, 18:08

Странный обработчик, если JS находится в начале, где ему как раз не место. И вообще, по чем вы конце концов щелкаете - в описании речь о кнопке "войти", которой в коде не видно, а обработчик установлен щелчку на форме? Теперь речь о щелчке и действии похожем на так "модное" href="#". В action="#form", который то в общем на сервер не передается.

Так что же вы делаете то на самом деле?

sones · #9 (**permalink**) 23.03.2015, 19:04

// функция авторизации вначале которой слайдер
<?
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();
}
?>

Если страница не прокручена - все нормально, я нажимаю на кнопку - меня плавно отпускает у нужному месту, но:

Цитата:

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

Я так понимаю, что из-за того, что сейчас offset().top (верх страницы)

laimas · #10 (**permalink**) 23.03.2015, 19:08

Какую кнопу вы нажимаете, отправку формы? А если форма отправляется, то это что означает?

Форум

Справочник

Discord чат

Курсы javascript