Страница регистрации и подтверждения пароля как реализовать

Тема в разделе "JavaScript", создана пользователем Muntik, 22 сен 2015.

Модераторы: ZiX
  1. Muntik

    Muntik

    Регистр.:
    3 июн 2008
    Сообщения:
    457
    Симпатии:
    88
    Добрый день подскажите как реализовать одностраничную форму авторизации :

    Сейчас есть index.php :
    Код:
    <form action="action.php" method="POST">
    <input type="text" class="form-control" id="username" name="username" placeholder="Номер телефона:79991112233 " required autofocus></br>
    <button type="submit">Получить код</button>
    </form>
    action.php :
    Генерирует пароль, делается запись в mysql связки username+password
    Пароль отправляется на смс через api и появляется форма с подтверждением пароля полученного по смс.

    Код:
     
    <form action="$PORTAL_ACTION$" method="POST">
    <input type="hidden" name = "auth_user" value="$username">
    <input name="auth_pass" type="password" class="form-control">
    <button type="submit">Отправить</button>
    </form>
    
    подскажите как можно реализовать такое же только на одной странице
     
  2. Горбушка

    Горбушка Ищу её...

    Регистр.:
    2 май 2008
    Сообщения:
    3.175
    Симпатии:
    2.195
  3. lexromanow

    lexromanow Писатель

    Регистр.:
    17 мар 2015
    Сообщения:
    2
    Симпатии:
    0
    Аякс или же во фрейм посылать данные и потом ловить от туда. В обеих случаях главная страница будет одна и не будет перезагружаться.
     
  4. horuz

    horuz Создатель

    Регистр.:
    17 окт 2012
    Сообщения:
    19
    Симпатии:
    3
    если подключить jquery и плагин к нему jQuery Form Plugin
    то можно будет отправить форму аяксом и получить ответ в тот же самый див, перезагруженая форма из ответа уже не имеет обработчика и сабмит на второй форме уже приведет к переходу на другую страницу.

    Код:
    <div id="myForm">
    <form action="action.php" method="POST">
    <input type="text" class="form-control" id="username" name="username" placeholder="Номер телефона:79991112233 " required autofocus></br>
    <button type="submit">Получить код</button>
    </form>
    </div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script>
     $(document).ready(function() { 
       $('#myForm form').attr("action","новый адрес для формы без дизайна");
       $('#myForm').ajaxForm({ target: '#myForm' } }); 
     }); 
    </script>
    
    изначально в форме адрес для перехода на форму с дизайном. если сработает яваскрипт, он заменит адрес на подгрузку формы без дизайна и повесит обработчик события на сабмит формы.
     
    Muntik нравится это.