Отображение текста формы

Question

Я делаю многостраничную форму, используя http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/. Я хочу добавить в конце страницу подтверждения, которая показывает другую информацию (имя, адрес электронной почты и т. Д.), Как она была введена без перезагрузкистраница.По сути, я хочу показать, что пользователь вводил в другой части страницы.Я предполагаю, что это будет использовать JQuery.Как я могу это сделать?

Answer 1

Вы делаете это так:

Предположим, что это первый шаг:

<fieldset class="step">
            <legend>Account</legend>
            <p>
                <label for="username">User name</label>
                <input id="username" name="username" />
            </p>
            <p>
                <label for="email">Email</label>
                <input id="email" name="email" type="email" />
            </p>
            <p>
                <label for="password">Password</label>
                <input id="password" name="password" type="password" />
            </p>
        </fieldset>

Ваш шаг подтверждения должен выглядеть следующим образом

<fieldset class="step">
            <legend>Confirm Your Account Information</legend>
            <p>
                <span id="username_confirmation"></span>
            </p>
            <p>
                <span id="email_confirmation"></span>
            </p>
            <p>
                <span id="password_confirmation"></span>
            </p>
        </fieldset>

И поместите этоКод JQuery в любой части страницы

$(function(){ $('input[type="text"]').keyup(function() {$("#"+$(this).attr("id")+"_confirmation").html($(this).val());}); });

Поэтому в основном он перехватывает любое событие keyup в любом текстовом поле, проверяет наличие элемента с идентификатором соответствующего текстового поля «плюс» _confirmation.Допустим, вы печатаете в текстовом поле username, в каждом keyup он будет искать элемент «username_confirmation» и изменять содержимое «username_confirmation» на то же значение «username»