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

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

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

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

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

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

Есть форма:

HTML5

<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

<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

<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

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

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

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

<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

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

@by-bad 1 / 1 / 0 Регистрация: 07.10.2013 Сообщений: 117
	09.02.2014, 21:35 [ТС]	12
	Сообщение от dmirtyi После того как форму отправляешь на сервер обрабатываешь при обработке textarea подставляешь в нужное места твой текст из инпута например вот так вот: В том то и дело, что это необходимо сделать до отправки данных в файл обработчик, что бы при необходимости можно было отредактировать исходный код из textarea. В целом ваш посыл по поводу регулярных выражений понял, да и предложенный вами вариант в самом начале рабочий, разве что не совсем подходящий для моего случая. Если предложить больше нечего - не имею права больше отвлекать вас, тем более что вы уже и так помогли. В любом случае спасибо за помощь, попробую поковырять, может что-то получится. 0

@fanatikus 1931 / 1522 / 703 Регистрация: 17.11.2012 Сообщений: 6,585
	09.02.2014, 20:41	6
	Сообщение от by-bad Как вставить текст из инпута между кавычек " " в тех 3х атрибутах ? дело не в кавычках, у тебя див в виде строки передается как аргумент функции image, иначе говоря его нет в DOM 0

@by-bad 1 / 1 / 0 Регистрация: 07.10.2013 Сообщений: 117
	09.02.2014, 20:43 [ТС]	7
	Сообщение от fanatikus дело не в кавычках, у тебя див в виде строки передается как аргумент функции image, иначе говоря его нет в DOM И какие тогда есть варианты? 0

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

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