Jump to content
  • 0

Пошаговая форма регистраций


BSandro
 Share

Question

Здравствуйте, хотелось бы узнать как реализовать пошаговую форму регистраций...

 

Примернов 3 этапа..

 

 

Допустим

 

Сверстана форма регистрация:

 

в верху названия этих этапов, ну и конечно подсветка этапа...

 

 

То есть функция заключается в том при нажатий на кнопку далее переходит на следущий этап.

Ну и конечно в верх показывает тоже там допустим 2 этап.

 

Искал рабочие скрипты что бы подделать под себя не нашел.

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

http://habrahabr.ru/post/123558/

http://web-elive.com/skripty/jq/poshagovaya-forma-registracii-na-jquery/

http://www.linkexchanger.su/2008/45.html

http://php.ru/forum/viewtopic.php?t=41099

 

Но вам наверно в раздел: Сделайте мне бесплатно или в Коммерческие услуги

Link to comment
Share on other sites

  • 0

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

Если нет и хочется просто визуально разбить ввод данных на порции и потом скопом все отправить на сервер, то достаточно html+css+js.

Если переходу к очередному этапу предшествует отправка данных на сервер, тогда еще нужно и серверные скрипты писать.

Link to comment
Share on other sites

  • 0

Да вот нашел скрипт уже, щас пытаюсь его переделать.....

$(function(){    //исходные значения полей    var field_values = {            //id        :  value            'username'  : 'Логин',            'password'  : 'Пароль',            'cpassword' : 'Пароль',            'firstname'  : 'Имя',            'lastname'  : 'Фамилия',            'email'  : 'email'    };    //input формы    $('input#username').inputfocus({ value: field_values['username'] });    $('input#password').inputfocus({ value: field_values['password'] });    $('input#cpassword').inputfocus({ value: field_values['cpassword'] });     $('input#lastname').inputfocus({ value: field_values['lastname'] });    $('input#firstname').inputfocus({ value: field_values['firstname'] });    $('input#email').inputfocus({ value: field_values['email'] });     //следующие этапы    $('form').submit(function(){ return false; });    $('#submit_first').click(function(){        //Удалить классы        $('#first_step input').removeClass('error').removeClass('valid');        //ckeck if inputs aren't empty        var fields = $('#first_step input[type=text], #first_step input[type=password]');        var error = 0;        fields.each(function(){            var value = $(this).val();            if( value.length<4 || value==field_values[$(this).attr('id')] ) {                //$(this).addClass('error'); //цвет рамки становится крассный если мы не ввели где то в форму                //$(this).effect("shake", { times:3 }, 50); //эффект times:3 время эффекта                error++;            } else {                $(this).addClass('valid');            }        });                        if(!error) {            if( $('#password').val() != $('#cpassword').val() ) {                    $('#first_step input[type=password]').each(function(){                       // $(this).removeClass('valid').addClass('error');                       // $(this).effect("shake", { times:3 }, 50);                    });                                     return false;            } else {                   //slide steps                $('#first_step').slideUp(); // Анимация о переходам                $('#second_step').slideToggle();  // Анимация о переходам            }                       } else return false;    });    $('#submit_second').click(function(){        //удалить классы        $('#second_step input').removeClass('error').removeClass('valid');        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;          var fields = $('#second_step input[type=text]');        var error = 0;        fields.each(function(){            var value = $(this).val();            if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {                $(this).addClass('error');                $(this).effect("shake", { times:3 }, 50);                                error++;            } else {                $(this).addClass('valid');            }        });        if(!error) {                //слайд шаги                $('#second_step').slideUp();                $('#third_step').slideDown();             } else return false;    });    $('#submit_third').click(function(){        //подготовить четвертый шаг        var fields = new Array(            $('#username').val(),            $('#password').val(),            $('#email').val(),            $('#firstname').val() + ' ' + $('#lastname').val(),            $('#age').val(),            $('#gender').val(),            $('#country').val()                               );        var tr = $('#fourth_step tr');        tr.each(function(){            //Alert (поля [$ (это). Index ()])            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);        });                        //слайд шаги        $('#third_step').slideUp();        $('#fourth_step').slideDown();                });    $('#submit_fourth').click(function(){        //отправить информацию на сервер        alert('Данные отправлены');    });});

Вот впринципе вот 2 кода, которые я пытался как мне надо сделать через .animation но так и не получилось

$('#first_step').slideUp(); // Анимация о переходам$('#second_step').slideDown();  // Анимация о переходам

остальное в коде мне все внятно и понятно, комменты сам писал..

 

 

впринципе мне не надо что бы он выезжал при нажатий по кнопке.

 

Сначало верх а потом снизу выходила другая форма, мне надо что бы  он убирал форму в лево  а вылазила новая справа!

 

как это сделать?  я вообще уже весь мозг себе ..... :mellow:


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

Если нет и хочется просто визуально разбить ввод данных на порции и потом скопом все отправить на сервер, то достаточно html+css+js.

Если переходу к очередному этапу предшествует отправка данных на сервер, тогда еще нужно и серверные скрипты писать.

 

регистрация уже написана на html+php+mysql

 

Мне лишь надо реализовать токо функцию со слайдом а так больше как бы проблем нету :-) ну эт пока :-)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy