Дублирование текста из формы в нужном месте страницы

@by-bad · Регистрация: 07.10.2013

Студворк — интернет-сервис помощи студентам

Всем привет, и перейду сразу к делу.

В общем, есть необходимость дублирования информации из input'а формы в нужном месте страницы, а именно внутри атрибута alt и title для изображений которые будут использованы в статье.

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

Есть форма:

HTML5
1
2
3
4
5
<form id="form1" name="form1" method="post" action="new.php">
<input name="title" type="text" id="title" />
<textarea name="text" id="text" cols="80" rows="20"></textarea>
<input type="submit" name="submit" id="submit" value="Добавить новую заметку" />
</form>

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

HTML5
1
2
3
4
5
<div align="center">        
<a href="http://мой_сайт.ru/папка/картинка.jpg" class="gallery" rel="group" title="тайтл_ссылки" >       
<img src="http://мой_сайт.ru/папка/картинка.jpg" width="680" alt="альт_картинки" title="тайтл_картинки" />
</a>
</div>

Как сделать так, что бы я написал в инпуте например "Осенний закат" и это название продублировалось в 3-х местах моего шаблона? В title="тайтл_ссылки", alt="альт_картинки" и title="тайтл_картинки" ?

В интернете я нашёл интересный вариант динамического дублирования текста, который почти подходит.

HTML5
1
2
<input name="input" value="" onKeyUp="javascript:document.getElementById('id_div').innerHTML = this.value;">
<div id="id_div" ></div>

В таком ключе информация из формы подставляется внутри блока div, но как известно, внутри тегов alt и title дивов быть не должно. Как решить эту проблему? Как сделать так что бы введённая информация дублировалась из инпута в 3-х местах?

Заранее благодарю за любую помощь, подсказки или ссылки.

@fanatikus · 09.02.2014, 18:37

как-то так, если я правильно понял

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
            function addatr(){
                var t = document.getElementById('title').value;
                document.getElementById('titleA').setAttribute('title',t);
                document.getElementById('titleImg').setAttribute('title',t);
                document.getElementById('titleImg').setAttribute('alt',t);
            }
        </script>
        <form id="form1" name="form1" method="post" action="new.php">
            <input name="title" type="text" id="title" onChange="addatr()"/>
            <textarea name="text" id="text" cols="80" rows="20"></textarea>
            <input type="submit" name="submit" id="submit" value="Добавить новую заметку" />
        </form>
 
        <div align="center">        
            <a href="http://мой_сайт.ru/папка/картинка.jpg" id="titleA" class="gallery" rel="group" title="" >       
            <img src="http://мой_сайт.ru/папка/картинка.jpg" id="titleImg" width="680" alt="" title="" />
            </a>
        </div>

@by-bad · 09.02.2014, 19:20 **[ТС]**

Сообщение от fanatikus

как-то так, если я правильно понял

Поняли всё правильно, в таком ключе работает именно так как мне надо, только у меня теперь появилсь несколько иная проблема. Всё дело в том, что последний блок с картинкой я вывожу средствами php с помощью echo "";

Вот так:

PHP
1
2
3
4
5
echo "<div align=&quot;center&quot;>        
            <a href=&quot;http://мой_сайт.ru/папка/картинка.jpg&quot; id=&quot;titleA&quot; class=&quot;gallery&quot; rel=&quot;group&quot; title=&quot;&quot; >       
            <img src=&quot;http://мой_сайт.ru/папка/картинка.jpg&quot; id=&quot;titleImg&quot; width=&quot;680&quot; alt=&quot;&quot; title=&quot;&quot; />
            </a>
        </div>";

Т.е. вместо кавычек используются амперсанты и видимо из-за этого данные не подставляются - можно что-то придумать? Замену кавычек убрать не получится, так как дальше этот код используется в других javascript'ах.

Добавлено через 2 минуты
PS: экранирование тоже не подходит

@fanatikus · 09.02.2014, 19:30

а может так

PHP
1
2
3
4
5
6
echo '<div align="center">        
                    <a href="http://мой_сайт.ru/папка/картинка.jpg" id="titleA" class="gallery" rel="group" title="" >       
                    <img src="http://мой_сайт.ru/папка/картинка.jpg" id="titleImg" width="680" alt="" title="" />
                    </a>
                </div>';
             ?>

@by-bad · 09.02.2014, 20:31 **[ТС]**

Сообщение от fanatikus

а может так

Нет, увы и так не пойдёт - я уже пробовал.
Суть в том, что этот див с картинкой ещё обвёрнут в javascript:image, а скрипт выступает в качестве ссылки. У меня в цикле выводятся превью изображений из выбранной папки, по клику на которые в форму для редактирования подставляется весь блок из echo "";.

Полная конструкция выглядит вот так:

PHP
1
2
3
4
5
6
echo "      
<a href=\"javascript:image('<div align=&quot;center&quot;>
<a class=&quot;gallery&quot; rel=&quot;group&quot; id=&quot;titleA&quot; title=&quot;&quot; href=&quot;http://мой_сайт.ru/папка/картинка.jpg&quot;>
<img src=&quot;http://мой_сайт.ru/папка/картинка.jpg&quot; width=&quot;".$imagesize_width."&quot; id=&quot;titleImg&quot; alt=&quot;&quot; title=&quot;&quot; />
</a>
</div>')\"><img src='http://мой_сайт.ru/папка/картинка.jpg' width='150' /></a>";

Как вставить текст из инпута между кавычек " " в тех 3х атрибутах ?

Добавлено через 29 минут
В переменную php это значение никак не пропихнуть? Что бы вставить его как ширину картинки, в таком виде:

PHP
1
2
3
title=&quot;".$imagetitleA."&quot;
title=&quot;".$imagetitleImg."&quot;
alt=&quot;".$imagealtImg."&quot;

Так было бы неплохо.

@fanatikus · 09.02.2014, 20:41

Сообщение от by-bad

Как вставить текст из инпута между кавычек " " в тех 3х атрибутах ?

дело не в кавычках, у тебя див в виде строки передается как аргумент функции image, иначе говоря его нет в DOM

@by-bad · 09.02.2014, 20:43 **[ТС]**

Сообщение от fanatikus

дело не в кавычках, у тебя див в виде строки передается как аргумент функции image, иначе говоря его нет в DOM

И какие тогда есть варианты?

@fanatikus · 09.02.2014, 20:52

я, не до конца понимаю, что происходит на странице, поэтому советовать что либо трудно.
покажи весь код страницы или объясни

@by-bad · 09.02.2014, 21:03 **[ТС]**

Сообщение от fanatikus

я, не до конца понимаю, что происходит на странице, поэтому советовать что либо трудно.
покажи весь код страницы или объясни

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

На сервере есть папка с изображениями которые будут использоваться в новой статье. Для удобства, я вывел на странице превью этих изображений и сделал так, что бы по нажатию на выбранную картинку, она добавлялась в textarea со всеми нужными атрибутами. Всё это происходит благодаря javascript:image.

Я добавил текст, кликнул на картинку, она подставилась в виде

HTML5
1
2
3
4
5
<div align="center">
<a href="http://мой_сайт.ru/".$folder."/".$file." class="gallery" rel="group" id="titleA" title="" ">
<img src="http://мой_сайт.ru/".$folder."/".$file."" width="".$imagesize_width."" id="titleImg" alt="" title="" />
</a>
</div>

Я нажал "Отправить" и страница опубликована.

Полный путь, имя картинки с расширением и её ширина автоматически подставляются в этот блок в цикле, всё что сейчас мне нужно это добавить в title ссылки, title и alt картинки название статьи из инпута в самом начале.

@dmirtyi · 09.02.2014, 21:22

После того как форму отправляешь на сервер обрабатываешь при обработке textarea подставляешь в нужное места твой текст из инпута например вот так вот:

PHP
1
$text = str_replace('title=""','title="'.$input.'"',$text);

Думаю регулярными получится лучше и красивее но в них не силен

@fanatikus · 09.02.2014, 21:24

как вариант,$folder, $file, $imagesize_width передавать в функцию image,
а там уже формировать див с ссылкой и картинкой, и подставить нужные значения атрибутов

@by-bad · 09.02.2014, 21:35 **[ТС]**

Сообщение от dmirtyi

После того как форму отправляешь на сервер обрабатываешь при обработке textarea подставляешь в нужное места твой текст из инпута например вот так вот:

В том то и дело, что это необходимо сделать до отправки данных в файл обработчик, что бы при необходимости можно было отредактировать исходный код из textarea.

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

В любом случае спасибо за помощь, попробую поковырять, может что-то получится.

@dmirtyi · 09.02.2014, 21:44

как я понял функция image принимает на вход значения и вставляет их в textarea

Можно переделать именно ее, передавать не готовый <div> А например ссылку, id, class и прочее
Далее в этой же функции image вытаскивать значения из нужного тебе input(единственный минус тот, что инпут заполнить надо будет раньше чем добавить картинку) и далее там сгенерировать div со всеми нужными параметрами и добавить в textarea

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@fanatikus 1932 / 1523 / 703 Регистрация: 17.11.2012 Сообщений: 6,585
	09.02.2014, 20:52
	я, не до конца понимаю, что происходит на странице, поэтому советовать что либо трудно. покажи весь код страницы или объясни 0

@fanatikus 1932 / 1523 / 703 Регистрация: 17.11.2012 Сообщений: 6,585
	09.02.2014, 21:24
	как вариант,$folder, $file, $imagesize_width передавать в функцию image, а там уже формировать див с ссылкой и картинкой, и подставить нужные значения атрибутов 1

@dmirtyi 31 / 31 / 4 Регистрация: 31.10.2013 Сообщений: 155
	09.02.2014, 21:44
	как я понял функция image принимает на вход значения и вставляет их в textarea Можно переделать именно ее, передавать не готовый <div> А например ссылку, id, class и прочее Далее в этой же функции image вытаскивать значения из нужного тебе input(единственный минус тот, что инпут заполнить надо будет раньше чем добавить картинку) и далее там сгенерировать div со всеми нужными параметрами и добавить в textarea 0