Как сделать предпросмотр введенных данных из формы?

Question

[nnkrasovok]

Пользователь заполнил поля формы. Как сделать предпросмотр этих данных до отправки на сервер?
Например, как на тостере, есть возможность предпросмотра вопроса

Comments

[Дмитрий]

Да так же форма отправляется, просто если поля были заполнены, их дублирует и выводит текст обработанный, но без сохранения

[nnkrasovok]

Дмитрий, вот да, потом дошло)

[nnkrasovok]

Дмитрий, хотя стоп. возникли вопросы. если вот точно также реализовать, как на тостере. то есть вопрос и 2 кнопки: опубликовать и предпросмтор, а на странице предпросмотра еще редактировать и опубликовать. мне тяжело вот это предположить. можете помочь пожалуйста? то есть что куда, какие экшены навязываются на кнопки, что примерно в экшенах и т.д.

[Дмитрий]

nnkrasovok, зачем редактировать? Предосмотр и опубликовать, причём даже вьюху можно общую. Если это предосмотр, рисуем форму обратно и достаём данные с реквеста, берём кусок вьюхи из отображения публикации, только данные берём с реквеста, а не хранилища. Тут ещё можно xss пропустить

[nnkrasovok]

Дмитрий,

зачем редактировать?

Он увидит страницу предпросмотра, и ему не понравится, как выглядит запись и захочет отредактировать

[Дмитрий]

nnkrasovok, так сверху поля с данными, либо сохранить либо отмена. Оно же ещё не в хранилище, редактировать в той же форме

[nnkrasovok]

Дмитрий, ещё вопрос. А как проверить активирована ли кнопка "предпросмотр" или "отправить"? Или это разные action?

[Дмитрий]

nnkrasovok, разные же, форма у вас не меняется, кнопки тоже. Просто при предосмотре в вашем шаблоне будет вывод что написали, и та же форма только уже с введёнными данными

[nnkrasovok]

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

[Дмитрий]

nnkrasovok, так тяните с реквеста, зачем их прокидывать?

[nnkrasovok]

Дмитрий, кое-как решила. чтобы тянуть с реквеста, должен быть пост. то есть два сабмита у формы. сделала через js. все работает. но только не знаю, как решить кнопку "отмена" при предпросмотре, то есть чтоб кинуло обратно на заполненную форму.
а то сейчас кидаю просто на экшн с формой, но там все пусто конечно. как быть?

[Дмитрий]

nnkrasovok, так там не должно быть кнопки отмена, должна быть кнопка сохранить только, это в предосмотре, ну и ссылка назад вернуть по реффереру или просто куда то. В самом предосмотре печатайте заполненную форму и сохранить кнопку, на экшон который пишет в бд или ещё куда. Сам предосмотр можно сабмитить на самого себя, то есть на экшон заполнения формы, просто в виде добавить блок с условием на вывод чего напечатал

[nnkrasovok]

ну и ссылка назад вернуть по реффереру

прошу прощения, а это как? я просто не понимаю

[nnkrasovok]

Дмитрий,

В самом предосмотре печатайте заполненную форму и сохранить кнопку, на экшон который пишет в бд или ещё куда

так а в чем смысл в предпросмотре печатать заполненную форму? если пользователь итак ее видит, когда заполняет форму... мне нужен предпросмотр, чтоб пользователь видел, как будет выглядеть его опубликованная запись

[Дмитрий]

nnkrasovok, ну так я и написал, снизу формы и вывод. Не понравилось, в форму дописал и сохранил

[Дмитрий]

nnkrasovok, перечитайте прошлые посты

[nnkrasovok]

Дмитрий, все, так и сделала. спасибо большое!

Answer 1

[Анатолий Куликов]

Первое, что приходит в голову - написать простейшую функцию на JS и повесить событие на кнопку. При активации блок редактора удаляется/прячется, а предварительный вариант рисуется.

Answer 2

[Евгений]

Форма о чем?
Сколько полей? Есть загружаемые картинки? Есть сложные поля, которые не просто инпута, а в которых заложена более сложная логика обработки?

Я бы делал через Pjax.
В форме две кнопки – опубликовать и предпросмотр. Каждая из них меняет какое-то скрытое поле в форме и отправляет форму на сервер. Контроллер валидирует форму и в зависимости от скрытого параметра либо сохраняет модель и редиректит на другую страницу, либо возвращает рендер.