ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Заполнение формы в три этапа.
18 сообщений из 18, страница 1 из 1
Заполнение формы в три этапа.
    #38851225
veltony
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
veltony
Участник
Уважаемые форумчане, подскажите, пожалуйста, новичку.

Есть форма, которая заполняется в три этапа. Вот она http://ruseller.com/lessons/les432/example/index.html
===================================================
HTML такой:
<style type="text/css">
body { font-family:Lucida Sans, Arial, Helvetica, Sans-Serif; font-size:13px; margin:20px;}
#main { width:960px; margin: 0px auto; border:solid 1px #b2b3b5; -moz-border-radius:10px; padding:20px; background-color:#f6f6f6;}
#header { text-align:center; border-bottom:solid 1px #b2b3b5; margin: 0 0 20px 0; }
fieldset { border:none; width:320px;}
legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}
label { display:block; margin:15px 0 5px;}
input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000;}
.prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none;}
.prev:hover, .next:hover { background-color:#000; text-decoration:none;}
.prev { float:left;}
.next { float:right;}
#steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}
#steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}
#steps li span {font-size:11px; display:block;}
#steps li.current { color:#000;}
#makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px;}
#makeWizard:hover { background-color:#000;}
</style>
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="formToWizard.js"></script>
<script type="text/javascript">
function MakeWizard() {
$("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })
$("#makeWizard").hide();
$("#info").fadeIn(400);
}
</script>
</head>
<body>
<div id="main">
<div id="header">
<p><a id="makeWizard" href="#" onclick="MakeWizard()">Нажмите здесь, чтобы изменить форму</a>
<span id="info" style="display:none;">Можете ничего не заполнять. Просто нажимайте на кнопку НЕКСТ :)</span></p>
</div>
<form id="SignupForm" action="">
<fieldset>
<legend>Account information</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
<label for="Password">Password</label>
<input id="Password" type="password" />
</fieldset>
<fieldset>
<legend>Company information</legend>
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" />
<label for="Website">Website</label>
<input id="Website" type="text" />
<label for="CompanyEmail">CompanyEmail</label>
<input id="CompanyEmail" type="text" />
</fieldset>
<fieldset>
<legend>Billing information</legend>
<label for="NameOnCard">Name on Card</label>
<input id="NameOnCard" type="text" />
<label for="CardNumber">Card Number</label>
<input id="CardNumber" type="text" />
<label for="CreditcardMonth">Expiration</label>
<select id="CreditcardMonth">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="CreditcardYear">
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
<label for="Address1">Address 1</label>
<input id="Address1" type="text" />
<label for="Address2">Address 2</label>
<input id="Address2" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="City">City</label>
<select id="Country">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
</select>
</fieldset>
<p>
<input id="SaveAccount" type="button" value="Submit form" />
</p>
</form>
</div>
</body>

================================================================
Код JS следующий:
(function($) {
$.fn.formToWizard = function(options) {
options = $.extend({
submitButton: '',
}, options);

var element = this;

var steps = $(element).find("fieldset");
var count = steps.size();
var submmitButtonName = "#" + options.submitButton;
$(submmitButtonName).hide();

// 2
$(element).before("<ul id='steps'></ul>");

steps.each(function(i) {
$(this).wrap("<div id='step" + i + "'></div>");
$(this).append("<p id='step" + i + "commands'></p>");

// 2
var name = $(this).find("legend").html();
$("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");

if (i == 0) {
createNextButton(i);
selectStep(i);
}
else if (i == count - 1) {
$("#step" + i).hide();
createPrevButton(i);
}
else {
$("#step" + i).hide();
createPrevButton(i);
createNextButton(i);
}
});

function createPrevButton(i) {
var stepName = "step" + i;
$("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");

$("#" + stepName + "Prev").bind("click", function(e) {
$("#" + stepName).hide();
$("#step" + (i - 1)).show();
$(submmitButtonName).hide();
selectStep(i - 1);
});
}

function createNextButton(i) {
var stepName = "step" + i;
$("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");

$("#" + stepName + "Next").bind("click", function(e) {
$("#" + stepName).hide();
$("#step" + (i + 1)).show();
if (i + 2 == count)
$(submmitButtonName).show();
selectStep(i + 1);
});
}

function selectStep(i) {
$("#steps li").removeClass("current");
$("#stepDesc" + i).addClass("current");
}

}
})(jQuery);

===============================


Подскажите, пожалуйста, можно ли на третьем этапе сделать вывод данных которые были заполнены на первом и втором шаге, перед отправкой данных на сервер.

Это чтобы пользователь убедился в правильности заполнения предадущих значений перед нажатием кнопки SUBMIT/

С ув.
...
Рейтинг: 0 / 0
10.01.2015, 14:05
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851241
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
veltony, можно конечно.

И, пожалуйста, оформите код нормально. Тут написано как: " Как мне оформить свое сообщение? "
...
Рейтинг: 0 / 0
10.01.2015, 14:42
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851248
veltony
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
veltony
Участник
veltonyУважаемые форумчане, подскажите, пожалуйста, новичку.

Есть форма, которая заполняется в три этапа. Вот она http://ruseller.com/lessons/les432/example/index.html
===================================================
HTML такой:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
<style type="text/css">
        body { font-family:Lucida Sans, Arial, Helvetica, Sans-Serif; font-size:13px; margin:20px;}
        #main { width:960px; margin: 0px auto; border:solid 1px #b2b3b5; -moz-border-radius:10px; padding:20px; background-color:#f6f6f6;}
        #header { text-align:center; border-bottom:solid 1px #b2b3b5; margin: 0 0 20px 0; }
        fieldset { border:none; width:320px;}
        legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}
        label { display:block; margin:15px 0 5px;}
        input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000;}
        .prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none;}
        .prev:hover, .next:hover { background-color:#000; text-decoration:none;}
        .prev { float:left;}
        .next { float:right;}
        #steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}
        #steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}
        #steps li span {font-size:11px; display:block;}
        #steps li.current { color:#000;}
        #makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px;}
        #makeWizard:hover { background-color:#000;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="formToWizard.js"></script>
    <script type="text/javascript">
        function MakeWizard() {
            $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })
            $("#makeWizard").hide();
            $("#info").fadeIn(400);
        }
    </script>
</head>
<body>
    <div id="main">
        <div id="header">
          <p><a id="makeWizard" href="#" onclick="MakeWizard()">Нажмите здесь, чтобы изменить форму</a>
            <span id="info" style="display:none;">Можете ничего не заполнять. Просто нажимайте на кнопку НЕКСТ :)</span></p>
        </div>
        <form id="SignupForm" action="">
        <fieldset>
            <legend>Account information</legend>
            <label for="Name">Name</label>
            <input id="Name" type="text" />
            <label for="Email">Email</label>
            <input id="Email" type="text" />
            <label for="Password">Password</label>
            <input id="Password" type="password" />
        </fieldset>
        <fieldset>
            <legend>Company information</legend>
            <label for="CompanyName">Company Name</label>
            <input id="CompanyName" type="text" />
            <label for="Website">Website</label>
            <input id="Website" type="text" />
            <label for="CompanyEmail">CompanyEmail</label>
            <input id="CompanyEmail" type="text" />
        </fieldset>
        <fieldset>
            <legend>Billing information</legend>
            <label for="NameOnCard">Name on Card</label>
            <input id="NameOnCard" type="text" />
            <label for="CardNumber">Card Number</label>
            <input id="CardNumber" type="text" />
            <label for="CreditcardMonth">Expiration</label>
            <select id="CreditcardMonth">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
            <select id="CreditcardYear">
                <option value="2009">2009</option>
                <option value="2010">2010</option>
            </select>        
            <label for="Address1">Address 1</label>
            <input id="Address1" type="text" />
            <label for="Address2">Address 2</label>
            <input id="Address2" type="text" />
            <label for="City">City</label>
            <input id="City" type="text" />
            <label for="City">City</label>
            <select id="Country">
			    <option value="CA">Canada</option>
                <option value="US">United States of America</option>
            </select>
        </fieldset>
        <p>
            <input id="SaveAccount" type="button" value="Submit form" />
        </p>
        </form>
    </div>
</body>


================================================================
Код JS следующий:

Код: java
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
(function($) {
    $.fn.formToWizard = function(options) {
        options = $.extend({  
            submitButton: '',  
        }, options); 
        
        var element = this;

        var steps = $(element).find("fieldset");
        var count = steps.size();
        var submmitButtonName = "#" + options.submitButton;
        $(submmitButtonName).hide();

        // 2
        $(element).before("<ul id='steps'></ul>");

        steps.each(function(i) {
            $(this).wrap("<div id='step" + i + "'></div>");
            $(this).append("<p id='step" + i + "commands'></p>");

            // 2
            var name = $(this).find("legend").html();
            $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");

            if (i == 0) {
                createNextButton(i);
                selectStep(i);
            }
            else if (i == count - 1) {
                $("#step" + i).hide();
                createPrevButton(i);
            }
            else {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
            }
        });

        function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");

            $("#" + stepName + "Prev").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show();
                $(submmitButtonName).hide();
                selectStep(i - 1);
            });
        }

        function createNextButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");

            $("#" + stepName + "Next").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show();
                if (i + 2 == count)
                    $(submmitButtonName).show();
                selectStep(i + 1);
            });
        }

        function selectStep(i) {
            $("#steps li").removeClass("current");
            $("#stepDesc" + i).addClass("current");
        }

    }
})(jQuery);


===============================


Подскажите, пожалуйста, можно ли на третьем этапе сделать вывод данных которые были заполнены на первом и втором шаге, перед отправкой данных на сервер.

Это чтобы пользователь убедился в правильности заполнения предадущих значений перед нажатием кнопки SUBMIT/

С ув.
...
Рейтинг: 0 / 0
10.01.2015, 14:55
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851253
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
veltony, так и в чём проблема? Вы не понимаете как работает код в formToWizard.js, и как показать все элементы <fieldset> разом?
...
Рейтинг: 0 / 0
10.01.2015, 15:11
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851254
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Или что Вы хотите сделать?
...
Рейтинг: 0 / 0
10.01.2015, 15:12
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851257
veltony
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
veltony
Участник
Я хотел-бы вывести на третьем этапе значения которые он введет на первом и втором этапе.
...
Рейтинг: 0 / 0
10.01.2015, 15:17
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851260
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
veltonyЯ хотел-бы вывести на третьем этапе значения которые он введет на первом и втором этапе.Ну то есть показать пользователю fieldset-ы "Account information" и "Company information" как по той ссылке, что привели. И в чём проблема?
...
Рейтинг: 0 / 0
10.01.2015, 15:22
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851262
veltony
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
veltony
Участник
Мало знаний
...
Рейтинг: 0 / 0
10.01.2015, 15:25
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851263
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
veltony, когда Вы нажимаете на кнопку "Нажмите здесь, чтобы изменить форму", то вызывается функция MakeWizard(), что из 3-х fieldset-ов делает 3 шага визарда.
При это сами fieldset-ы как были в документе, так и остались. Просто то один скрывается, то другой. Соответсвенно на последнем шаге можно выполнить действия, обратные MakeWizard(), и показать все fieldset-ы.

Вы этого хотите, или как?
...
Рейтинг: 0 / 0
10.01.2015, 15:26
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851270
veltony
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
veltony
Участник
Хотелось бы таким образом:

Пользователь открывает страницу регистрации и видит первый шаг заполения три поля: "Name", "Email" и "Password", заполняет эти три поля.

Далее нажимает NEXT, заполняет еще три поля "Company Name","Website" и "CompanyEmail" нажимает NEXT

И видит кроме полей для заполнения Billing information,

значения которые он ввел ранее "Name", "Email" "Password" и т.д. но не в виде формы, а значения , чтобы он убедился что заполнил правильно и после этого нажимает SUBMIT.
...
Рейтинг: 0 / 0
10.01.2015, 15:41
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851272
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
veltonyХотелось бы таким образом:

Пользователь открывает страницу регистрации и видит первый шаг заполения три поля: "Name", "Email" и "Password", заполняет эти три поля.

Далее нажимает NEXT, заполняет еще три поля "Company Name","Website" и "CompanyEmail" нажимает NEXT

И видит кроме полей для заполнения Billing information,

значения которые он ввел ранее "Name", "Email" "Password" и т.д. но не в виде формы, а значения , чтобы он убедился что заполнил правильно и после этого нажимает SUBMIT.А если не правильно?
...
Рейтинг: 0 / 0
10.01.2015, 15:44
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851273
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
veltony, а сверстать последний шаг, как Вам надо, Вы можете?
...
Рейтинг: 0 / 0
10.01.2015, 15:45
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851277
veltony
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
veltony
Участник
Если неправильно, то он нажимает "Back" возвращается и редактирует,

просто перед отправкой на сервер, он убедился что он всё правильно заполнил.
...
Рейтинг: 0 / 0
10.01.2015, 15:51
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851299
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
veltony, ну вот как-то так: http://learn.javascript.ru/play/NHduT

Сообразите что к чему?
...
Рейтинг: 0 / 0
10.01.2015, 17:01
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851501
veltony
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
veltony
Участник
То, что нужно.
Огромное спасибо!
...
Рейтинг: 0 / 0
11.01.2015, 08:24
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851507
veltony
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
veltony
Участник
veltonyТо, что нужно.
Огромное спасибо!

P.S. Единственное, подскажите, если можно, (слаб я в javascripte)
как сделать, чтобы при загрузке страницы, не было "Нажмите здесь, чтобы изменить форму" а открывался сразу первый шаг с тремя полями "Name", "Email", "Password".
...
Рейтинг: 0 / 0
11.01.2015, 08:32
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851526
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
veltonyveltonyТо, что нужно.
Огромное спасибо!

P.S. Единственное, подскажите, если можно, (слаб я в javascripte)Вы не слаб, Вы даже основ не знаете. Начните читать Учебник .
Для начала События, взаимодействие с посетителем » События: основы » Введение в браузерные события

veltonyкак сделать, чтобы при загрузке страницы, не было "Нажмите здесь, чтобы изменить форму" а открывался сразу первый шаг с тремя полями "Name", "Email", "Password".Очевидно, что нужно убрать кнопку "Нажмите здесь, чтобы изменить форму" из разметки, а метод formToWizard() вызвать после загрузки страницы, а не по клику.

http://learn.javascript.ru/play/tQEmz
...
Рейтинг: 0 / 0
11.01.2015, 11:09
| Ответить | Цитировать | Написать  
Заполнение формы в три этапа.
    #38851538
veltony
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
veltony
Участник
Спасибо.
...
Рейтинг: 0 / 0
11.01.2015, 11:50
| Ответить | Цитировать | Написать  
18 сообщений из 18, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Заполнение формы в три этапа.
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38851507&tid=1446376]:
 0ms
get settings:
 7ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 165ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 43ms
get tp. blocked users:
 1ms
others: 214ms
total:  455ms
созд. / загр.: 455ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]