Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Заполнение формы в три этапа

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
veltony
Отправлено: 10 Января, 2015 - 12:50:29
Post Id


Новичок


Покинул форум
Сообщений всего: 49
Дата рег-ции: Апр. 2013  


Помог: 0 раз(а)




Уважаемые форумчане, подскажите, пожалуйста, новичку.

Есть форма, которая заполняется в три этапа. Вот онаhttp://ruseller[dot]com/lessons/les4[dot][dot][dot]ample/index[dot]html

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


Код JS следующий:
CODE (javascript):
скопировать код в буфер обмена
  1. (function($) {
  2.     $.fn.formToWizard = function(options) {
  3.         options = $.extend({  
  4.             submitButton: '',  
  5.         }, options);
  6.        
  7.         var element = this;
  8.  
  9.         var steps = $(element).find("fieldset");
  10.         var count = steps.size();
  11.         var submmitButtonName = "#" + options.submitButton;
  12.         $(submmitButtonName).hide();
  13.  
  14.         // 2
  15.         $(element).before("<ul id='steps'></ul>");
  16.  
  17.         steps.each(function(i) {
  18.             $(this).wrap("<div id='step" + i + "'></div>");
  19.             $(this).append("<p id='step" + i + "commands'></p>");
  20.  
  21.             // 2
  22.             var name = $(this).find("legend").html();
  23.             $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");
  24.  
  25.             if (i == 0) {
  26.                 createNextButton(i);
  27.                 selectStep(i);
  28.             }
  29.             else if (i == count - 1) {
  30.                 $("#step" + i).hide();
  31.                 createPrevButton(i);
  32.             }
  33.             else {
  34.                 $("#step" + i).hide();
  35.                 createPrevButton(i);
  36.                 createNextButton(i);
  37.             }
  38.         });
  39.  
  40.         function createPrevButton(i) {
  41.             var stepName = "step" + i;
  42.             $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");
  43.  
  44.             $("#" + stepName + "Prev").bind("click", function(e) {
  45.                 $("#" + stepName).hide();
  46.                 $("#step" + (i - 1)).show();
  47.                 $(submmitButtonName).hide();
  48.                 selectStep(i - 1);
  49.             });
  50.         }
  51.  
  52.         function createNextButton(i) {
  53.             var stepName = "step" + i;
  54.             $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");
  55.  
  56.             $("#" + stepName + "Next").bind("click", function(e) {
  57.                 $("#" + stepName).hide();
  58.                 $("#step" + (i + 1)).show();
  59.                 if (i + 2 == count)
  60.                     $(submmitButtonName).show();
  61.                 selectStep(i + 1);
  62.             });
  63.         }
  64.  
  65.         function selectStep(i) {
  66.             $("#steps li").removeClass("current");
  67.             $("#stepDesc" + i).addClass("current");
  68.         }
  69.  
  70.     }
  71. })(jQuery);


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

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

С ув.
 
 Top
veltony
Отправлено: 11 Января, 2015 - 10:56:29
Post Id


Новичок


Покинул форум
Сообщений всего: 49
Дата рег-ции: Апр. 2013  


Помог: 0 раз(а)




Вопрос решил.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


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



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB