Заполнение формы в три этапа.
Уважаемые форумчане, подскажите, пожалуйста, новичку.
Есть форма, которая заполняется в три этапа. Вот она 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/ С ув. |
veltony, добавь еще один fieldset, т.е. на последнем шаге будет preview, после 59-й строки добавь вызов функции типа createPreview() фигурные скобки не забудь поставить для условия, ну и саму функцию createPreview определи, в ней формируй контент preview, начни с этого.
|
Спасибо. Вопрос решил.
|
Часовой пояс GMT +3, время: 16:54. |