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

[BSandro]

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

 

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

 

 

Допустим

 

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

 

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

 

 

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

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

 

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

[npofopr]

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

 

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

[CoDy]

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

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

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

[BSandro]

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

$(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();  // Анимация о переходам

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

 

 

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

 

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

 

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

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

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

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

 

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

 

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