Пошаговое введение данных и переключение между формами
Добрый день.
Пожалуйста помогите! Есть форма введения последовательных данных, index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/style.css" type="text/css"> <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"> $(document).ready(function() { $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' }) ; $("#info").fadeIn(400); }) </script> </head> <body> <div id="main"> <form id="SignupForm" action="feedback.php" method="POST" name="SignupForm"> <fieldset><!--выбор пожертвования 15, 10 или своя сумма--> <legend>Step 1</legend> <hr> <input id="Button_Sum15" type="radio" value="1"/> <label for="Sum15">Ich möchte die Arbeit der Projekthilfe Gambia e.V. dauerhaft unterstützen und für min. 10 € im Monat bis auf Widerruf Förderer in der Hilfsorganisation werden.</label> <br> <input id="Button_Sum10" type="radio" value="2"/> <label for="Sum10">Ich möchte eine Projekt-Patenschaft für die Ausbildung eines Vorschulkindes bis auf Widerruf für einen monatlichen Grundbetrag von 15 € übernehmen.</label> <br> <input id="Button_SumMAX" type="radio" value="3"/> <label for="SumMAX">Ich möchte die Arbeit der Projekthilfe Gambia e.V. durch eine Spende Unterstützen.</label> <hr> </fieldset> <fieldset><!--Данные по человеку, Step 2--> <legend>Step 2 Data User</legend> <hr> <label for="Name">Name</label> <input id="Name" type="text" /> <label for="PLZ">PLZ/Ort</label> <input id="PLZ" type="text" /> <label for="Telefon">Telefon</label> <input id="Telefon" type="text" /> <label for="Strasse">Strasse</label> <input id="Strasse" type="text" /> <label for="Email">E-mail</label> <input id="Email" type="text" /> <label for="Kontoinhaber">Kontoinhaber</label> <input id="Kontoinhaber" type="text" /> <label for="BIC">BIC</label> <input id="BIC" type="text" /> <label for="IBAN">IBAN</label> <input id="IBAN" type="text" /> <label for="Name der Bank">Name der Bank</label> <input id="Name der Bank" type="text" /> <hr> </fieldset> <fieldset id="Form_Sum15"><!--форма пожертвования 15 евро--> <legend>Step 3 - Sum15</legend> <hr> <label>Vielen Dank, dass Sie eine Patenschaft übernehmen. In welchen Abständen soll der Monatsbeitrag in Höhe von 15,- EUR vom genannten Konto abgebucht werden?.</label> <label>Ziehen Sie den oben genannten Betrag von meinem Konto ab.</label> <br> <input id="monatlich15" type="radio" value="1"/> <label for="monatlich15">monatlich </label> <input id="vierteljaehrig15" type="radio" value="2"/> <label for="vierteljaehrig15">vierteljaehrig </label> <input id="halbjaehrig15" type="radio" value="3"/> <label for="halbjaehrig15">halbjaehrig </label> <input id="jaehrlich15" type="radio" value="4"/> <label for="jaehrlich15">jaehrlich</label> <hr> <label>Ich benötige eine Zuwendungsbestätigung zur Vorlage beim Finanzamt,die mir am Anfang des Folgejahres meiner Beitragszahlung / Spende zugestellt wird.</label> <br> <input id="Ja15" type="radio" value="1"/> <label for="Ja15">Ja</label> <input id="Nein15" type="radio" value="2"/> <label for="Nein15">Nein</label> <hr> </fieldset> <fieldset id="Form_Sum10"><!--форма пожертвования 10 евро--> <legend>Step 3 - Sum10</legend> <label>Welchen Betrag möchten Sie spenden?</label> <input id="Welchen10" type="text" /> <hr> <label>Ziehen Sie den oben genannten Betrag von meinem Konto ab.</label> <br> <input id="monatlich10" type="radio" value="1"/> <label for="monatlich10">monatlich </label> <input id="vierteljaehrig10" type="radio" value="2"/> <label for="vierteljaehrig10">vierteljaehrig </label> <input id="halbjaehrig10" type="radio" value="3"/> <label for="halbjaehrig10">halbjaehrig </label> <input id="jaehrlich10" type="radio" value="4"/> <label for="jaehrlich10">jaehrlich</label> <hr> <label>Ich benötige eine Zuwendungsbestätigung zur Vorlage beim Finanzamt,die mir am Anfang des Folgejahres meiner Beitragszahlung / Spende zugestellt wird.</label> <br> <input id="Ja10" type="radio" value="1"/> <label for="Ja10">Ja</label> <input id="Nein10" type="radio" value="2"/> <label for="Nein10">Nein</label> <hr> </fieldset> <fieldset id="Form_SumMAX"><!--форма пожертвования, Своя сумма--> <legend>Step 3 - SumMAX</legend> <label>Welchen Betrag möchten Sie spenden?</label> <input id="WelchenMAX" type="text" /> <hr> <label>Ich benötige eine Zuwendungsbestätigung zur Vorlage beim Finanzamt,die mir am Anfang des Folgejahres meiner Beitragszahlung / Spende zugestellt wird.</label> <br> <input id="JaMAX" type="radio" value="1"/> <label for="JaMAX">Ja</label> <input id="NeinMAX" type="radio" value="2"/> <label for="NeinMAX">Nein</label> <hr> </fieldset> <fieldset><!--Отображаются данные, которые заполнил клиент в Step 2--> <legend>Step 4 Data User View</legend> <hr> <label>Name, Anschrift:</label> <?php echo $DATA_NAMEANSCHRIFT ?> <br> <label>Bankverbindung:</label> <?php echo $DATA_BANNKVERBINDUNG ?> <br> <label>Ihre Spende:</label> <?php echo $DATA_IHRESPENDE ?> <hr> <p> <input id="SaveAccount" class="srenden" type="submit" value="Senden" /> </p> <hr> </fieldset> </form> </div> </body> </html> К ней подключен скрипт управления, formToWizard.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(); 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 impressum'>< 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 impressum'>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); Нужен следующий функционал: (Sum15) Если пользователь выбирает кнопку Button_Sum15 в шаге Step 1 то его перекидывает на форму заполнение данных Step 2 Data User и потом на форму Form_Sum15 . (Sum10) Если выбирает кнопку Button_Sum10 в шаге Step 1 то его перекидывает на форму Step 2 Data User где он заполняет данные, а потом Form_Sum10 . (SumMAX) Если выбирает кнопку Button_SumMAX в шаге Step 1 то его перекидывает на форму Step 2 Data User где он заполняет данные, а потом на Form_SumMAX . Дальше последний шаг Step 4 Data User View и все. Так же почему то не работает переключение между кнопок(((. Пожалуйста, помогите решить! Я уверен для профи это не сложно. |
Оказывается все очень печально товарищи, не прошло и недели))
|
Вопрос снят.
|
Часовой пояс GMT +3, время: 00:30. |