Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Пошаговое введение данных и переключение между формами

Добрый день.
Пожалуйста помогите!
Есть форма введения последовательных данных, 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 и все.

Так же почему то не работает переключение между кнопок(((.

Пожалуйста, помогите решить!
Я уверен для профи это не сложно.
Ответ: Оказывается все очень печально товарищи, не прошло и недели))
Вопрос: Переключение между формами

Добрый день уважаемые форумчане.
Стоит задача сделать форму.
Форма должна меняться при нажатии на кнопку (изображене прилогается)
Не хватает знаний как это сделать, только учусь. Прошу помощи.

 <section id="SECTION_132">
<div id="DIV_133">
<div id="DIV_134">
<div id="DIV_135">
<div id="DIV_1">

<button id="BUTTON_2">
Адрес
</button>
<button id="BUTTON_3">
Кадастровый номер
</button>
<div id="DIV_4">
</div>
<div id="DIV_5">
<p id="P_6">
Регион <span id="SPAN_7">*</span>
</p>
<input id="INPUT_8" />
<div id="DIV_9">
<p id="P_94">
Населенный пункт <span id="SPAN_95">*</span>
</p>
<input id="INPUT_96" />
<div id="DIV_97">
<p id="P_98">
Улица <span id="SPAN_99">*</span>
</p>
<input id="INPUT_100" />
<div id="DIV_101">
<p id="P_102">
Дом <span id="SPAN_103">*</span>
</p>
<input id="INPUT_104" />
<p id="P_105">
Корпус
</p>
<input id="INPUT_106" />
</div>
<div id="DIV_107">
<p id="P_108">
Квартира
</p>
<input id="INPUT_109" />
<p id="P_110">
Строение
</p>
<input id="INPUT_111" />
</div>
<div id="DIV_112">
</div>
<div id="DIV_113">
<img src="images/loader.gif" id="IMG_114" alt='' />
<button id="BUTTON_115">
Найти
</button>
</div>
</div>
<div id="DIV_116">
<br id="BR_117" /><br id="BR_118" /><br id="BR_119" /><br id="BR_120" /><br id="BR_121" />
<p id="P_122">
Кадастровый номер <span id="SPAN_123">*</span>
</p>
<input placeholder="38:36:000021:18265" id="INPUT_124" /><br id="BR_125" /><br id="BR_126" /><br id="BR_127" /><br id="BR_128" />
<div id="DIV_129">
<img src="images/loader.gif" id="IMG_130" alt='' />
<button id="BUTTON_131">
Найти
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>


Заранее благодарен.
Ответ:
По данной тематике, очень
Вопрос: Переключение между формами

Добрый день уважаемые форумчане.
Стоит задача сделать форму.
Форма должна меняться при нажатии на кнопку (изображене прилогается)
Не хватает знаний как это сделать, только учусь. Прошу помощи.

 <section id="SECTION_132">
<div id="DIV_133">
<div id="DIV_134">
<div id="DIV_135">
<div id="DIV_1">

<button id="BUTTON_2">
Адрес
</button>
<button id="BUTTON_3">
Кадастровый номер
</button>
<div id="DIV_4">
</div>
<div id="DIV_5">
<p id="P_6">
Регион <span id="SPAN_7">*</span>
</p>
<input id="INPUT_8" />
<div id="DIV_9">
<p id="P_94">
Населенный пункт <span id="SPAN_95">*</span>
</p>
<input id="INPUT_96" />
<div id="DIV_97">
<p id="P_98">
Улица <span id="SPAN_99">*</span>
</p>
<input id="INPUT_100" />
<div id="DIV_101">
<p id="P_102">
Дом <span id="SPAN_103">*</span>
</p>
<input id="INPUT_104" />
<p id="P_105">
Корпус
</p>
<input id="INPUT_106" />
</div>
<div id="DIV_107">
<p id="P_108">
Квартира
</p>
<input id="INPUT_109" />
<p id="P_110">
Строение
</p>
<input id="INPUT_111" />
</div>
<div id="DIV_112">
</div>
<div id="DIV_113">
<img src="images/loader.gif" id="IMG_114" alt='' />
<button id="BUTTON_115">
Найти
</button>
</div>
</div>
<div id="DIV_116">
<br id="BR_117" /><br id="BR_118" /><br id="BR_119" /><br id="BR_120" /><br id="BR_121" />
<p id="P_122">
Кадастровый номер <span id="SPAN_123">*</span>
</p>
<input placeholder="38:36:000021:18265" id="INPUT_124" /><br id="BR_125" /><br id="BR_126" /><br id="BR_127" /><br id="BR_128" />
<div id="DIV_129">
<img src="images/loader.gif" id="IMG_130" alt='' />
<button id="BUTTON_131">
Найти
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>


Заранее благодарен.
Ответ:
По данной тематике, очень
Вопрос: Переключение между формами

Добрый день уважаемые форумчане.
Стоит задача сделать форму.
Форма должна меняться при нажатии на кнопку (изображене прилогается)
Не хватает знаний как это сделать, только учусь. Прошу помощи.

 <section id="SECTION_132">
<div id="DIV_133">
<div id="DIV_134">
<div id="DIV_135">
<div id="DIV_1">

<button id="BUTTON_2">
Адрес
</button>
<button id="BUTTON_3">
Кадастровый номер
</button>
<div id="DIV_4">
</div>
<div id="DIV_5">
<p id="P_6">
Регион <span id="SPAN_7">*</span>
</p>
<input id="INPUT_8" />
<div id="DIV_9">
<p id="P_94">
Населенный пункт <span id="SPAN_95">*</span>
</p>
<input id="INPUT_96" />
<div id="DIV_97">
<p id="P_98">
Улица <span id="SPAN_99">*</span>
</p>
<input id="INPUT_100" />
<div id="DIV_101">
<p id="P_102">
Дом <span id="SPAN_103">*</span>
</p>
<input id="INPUT_104" />
<p id="P_105">
Корпус
</p>
<input id="INPUT_106" />
</div>
<div id="DIV_107">
<p id="P_108">
Квартира
</p>
<input id="INPUT_109" />
<p id="P_110">
Строение
</p>
<input id="INPUT_111" />
</div>
<div id="DIV_112">
</div>
<div id="DIV_113">
<img src="images/loader.gif" id="IMG_114" alt='' />
<button id="BUTTON_115">
Найти
</button>
</div>
</div>
<div id="DIV_116">
<br id="BR_117" /><br id="BR_118" /><br id="BR_119" /><br id="BR_120" /><br id="BR_121" />
<p id="P_122">
Кадастровый номер <span id="SPAN_123">*</span>
</p>
<input placeholder="38:36:000021:18265" id="INPUT_124" /><br id="BR_125" /><br id="BR_126" /><br id="BR_127" /><br id="BR_128" />
<div id="DIV_129">
<img src="images/loader.gif" id="IMG_130" alt='' />
<button id="BUTTON_131">
Найти
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>


Заранее благодарен.
Ответ:
По данной тематике, очень
Вопрос: Отключение аудио при переключении между монтажными кадрами

Доброго времени суток, форумчане.
Имеется flash-ролик, содержащий несколько монтажных кадров. Некоторые монтажные кадры содержат аудио. При переключении между кадрами аудио накладываются. Подскажите пожалуйста, как сделать так, что бы при переключении монтажного кадра музыка тоже отключалась? Заранее спасибо.
Ответ:
Вопрос: переключение между кнопками

Как реализовать переключение между кнопками?
Прикреплено изображение (Нажмите для увеличения)

Ответ:
Добавьте класс .gray и добавляйте его к нажатой кнопке, а у остальных убирайте. Если нужно запоминать состояние - куки в помощь.


-----
Список фильмов с описанием, блекджеком и... для Joomla? ->
Демо нового движка для сайта php.su -> , проект на
Вопрос: Переключение между скриптами

Код HTML5
1
2
3
4
<select id='gamemode' class='form-control' onchange='setGameMode($(this).val())' required>
                    <option selected value=''>FFA</option>
                    <option value='teams'>TEST</option>
                </select>
Как с помощью этого кода сделать переключение между скриптами.

Например, выбрал FFA и подключен этот файл

Код HTML5
1
<script src="FFA.js"></script>
Выбрал TEST то подключен этот файл

Код HTML5
1
<script src="TEST.js"></script>
Одновременно подключены оба не могут. Спасибо большое
Ответ: Сделал всё по коду kalabuni, не работает вообще. т.к. при первом запуске страницы, должен автоматически подключаться какой-то скрипт (первый скрипт) но не подключается ни один...
Вопрос: Скрывать и делать необязательной часть формы при выборе вариантов

Сделал форму для выбора варианта доставки, где есть 2 инпута радио. Почта и Курьером.

При выборе варианта Почта, должны появится 2 поля: Город и Отделение. У самовывоза, соответственно 1 поле: Адрес доставки.

Проблема:
1) Не могу реализовать, что бы формы скрывались при переключении между чекбоксами. Нашел решение только для одной.
2) Поля форм становились обязательными при выборе конкретного чекбокса. Сейчас либо все обязательны - форма не пропускает, либо все необязательны - тогда и заполнять не нужно.

Просветите пожалуйста.



{foreach $deliveries as $delivery}
<div class="checkbox">
     <input type="radio" id="deliveries_{$delivery->id}" {if $delivery->id==1} onChange="show()" {else} onChange="hide()">
</div>

     <h3> <label for="deliveries_{$delivery->id}">{$delivery->name}</label></h3>


{if $delivery->id==1}
   <div id="info">
      <input placeholder="Город" type="text" value="{$city|escape}"  required/>
      <input placeholder="Отделение"  type="text" value="{$address|escape}"  required />
     </div>
 {/if}

{if $delivery->id==2}
   <div id="info1">
        <input placeholder="улица / дом / эт / кв." type="text" value="{$address1|escape}" required   />
    </div>
  {/foreach}


<script>
        function show() { document.getElementById('info').style.display='block';}
        function hide() { document.getElementById('info').style.display='none';}
    </script>
Ответ:
Сообщение от laimas
Так тогда зачем Я бы примерно так сделал и тоже каждая из кнопок сама по себе?
Эта хрень один фиг будет работать, правда не так, как задумывалось)
В итоге форма "подстроится" под последний измененный чекбокс.

И да, я таки проморгал отсутствие атрибута)
Вопрос: Переключение между <div>-ами

В первый раз работаю со скриптами и прошу помощи. Нужно сделать некую навигацию между дивами. Например, в форме есть 3 дива, два из которых изначально будут спрятаны. А также 3 кнопки назад, вперед и конец, при первом диве показана только кнопка вперед, на втором вперед и назад и так далее. Как такое реализовать.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form name="input" method="POST">
 
            <div id="divFirstname">
                <label for="firstname">Введите ваше Имя:</label>
                <input type="text" name="firstname" id="firstname">
            </div>
 
            <div id="divLastname" style="display: none">
                <label for="lastname">Введите вашу Фамилию:</label>
                <input type="text" name="lastname" id="lastname">
            </div>
 
            <div id="divEmail" style="display: none">
                <label for="email">Введите ваш email:</label>
                <input type="email" name="email" id="email" value="example@example.com">
            </div>
 
            <input type="button" id="NextButton" value="Далее">
            <input type="button" id="BackButton" value="Назад" style="display: none">
            <input type="button" id="ReadyButton" value="Готово" style="display: none">
        </form>
Ответ:
CSS
1
2
3
4
5
6
7
8
9
form .block:not(:first-child){
  display:none;
}
form .block:first-child > .last{
  display:none;
}
form .block:last-child > .next{
  display:none;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action="#">
<div class="block">Block 1
  <button class="last">Last</button>
  <input type="button" class="last" value="Назад">
  <input type="button" class="next" value="Далее">
</div>
<div class="block">Block 2
  <input type="button" class="last" value="Назад">
  <input type="button" class="next" value="Далее">
</div>
<div class="block">Block 3
  <input type="button" class="last" value="Назад">
  <input type="button" class="next" value="Далее">
</div>
</form>
Javascript
1
2
3
4
5
6
7
8
$('.block .next').click(function() {
  $(this).parent().css('display', 'none');
  $(this).parent().next().css('display', 'block');
});
$('.block .last').click(function() {
  $(this).parent().css('display', 'none');
  $(this).parent().prev().css('display', 'block');
});
Вопрос: Наборы параметров для HTML блока и переключение между ними

Здравствуйте!
Мастерю что-то вроде опций товара в интернет-магазине. Дело в том, что опций много, и в зависимости от одной опции, меняются другие опции.
Например
Есть футболка. Футболка может быть пяти размеров - супер маленькая, маленькая, обычная, большая, супер большая.
В зависимости от того, какой размер выбран, у футболки может быть разный тип ткани (если маленькие, то хлопок, если средняя и больше, то например, синтетика)
И опять таки, если выбрана синтетика, то рисунок на футболке может быть сделан только одним типом краски (когда для хлопка можно выбрать три типа краски) и она не может быть красного цвета.

Я пытаюсь сообразить, как бы это грамотнее все сделать.
Все эти опции разделены на группы радио кнопок и в зависимости от выбранных опций, меняется превью товара.
Сейчас это выглядит как перебор кучи условий if-else и замена состояний тех или иных форм ввода и изменение классов у картинки-превью.
Код разросся почти до 200 строк и смотреть на него не приятно.
Буду рад любой помощи, спасибо.
Ответ:
Сообщение от zahod5277
этот формат использует модуль CMS
Модуль, это не ядро, его и переписать можно. Хранить в базе вместо характеристик, каждая из которых может быть связана со множеством товаров, строки - это и избыточность данных, и сведение на нет всего преимущества базы. Ведь если товаров на странице много, и характеристика может может быть связана со множеством из них, то даже без асинхронного запроса к серверу, используя объект, все будет куда более компактнее и на клиенте.